基于单击的Highchartjs更改

Question

我试着用高图集来制作图表。我有一个单选按钮来选择数据。

因此，如何根据单击单选按钮更改高图表上的数据。

例如：

我的单选按钮

• 标签-数据-1
• 标签-数据-2
• 标签-数据-3
• 标签-数据-4

编辑和我的高图表

选择label-data-1时

选择label-data-2时

当选择label-data-3时

当选择label-data-4时等。

所以当我选择标签-数据-1，高图点改为3月11日，当我选择标签-数据-2，高图表指向3月12日，当我选择标签-数据-3，高图表点到13 marc，等等。

Answer 1

假设您的单选按钮有一个公共类str_rad和名称radbutton，则无法绑定单选按钮上的单击事件。

JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTML:

label-data-1<input type="radio" class="str_rad" name="radbutton" value="label-data-1"><br/>
label-data-2<input type="radio" class="str_rad" name="radbutton" value="label-data-2"><br/>
label-data-3<input type="radio" class="str_rad" name="radbutton" value="label-data-3"><br/>
label-data-4<input type="radio" class="str_rad" name="radbutton" value="label-data-4"><br/>

JavaScript:

$('.str_rad').click(function() {
        var chart = $('#container').highcharts();
        //#container is your chart container div
        //For Remove Chart Updated style.
        chart.series[0].data[0].update({
            marker:{
                fillColor: '#7cb6ee',radius: 4,symbol: ''
                     }
          });
          chart.series[0].data[1].update({
            marker:{
                fillColor: '#7cb6ee',radius: 4,symbol: ''
                     }
          });
          chart.series[0].data[2].update({
            marker:{
                fillColor: '#7cb6ee',radius: 4,symbol: ''
                     }
          });
          chart.series[0].data[3].update({
            marker:{
                fillColor: '#7cb6ee',radius: 4,symbol: ''
                     }
          });
        //For Chart Updated style .
        if($(this).val() == "label-data-1")
        {
          chart.series[0].data[0].update({
            marker:{
                fillColor: 'red',
                radius: 8,symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'  
                // There you can use any of the following radius or symbol for your chart as per your need.
                     }
          });
        }
        else if($(this).val() == "label-data-2")
        {
           chart.series[0].data[1].update({
            marker:{
                fillColor: 'red',
                radius: 8,symbol:'url(https://www.highcharts.com/samples/graphics/sun.png)'
                     }
           });
        }
        else if($(this).val() == "label-data-3")
        {
          chart.series[0].data[2].update({
            marker:{
                fillColor: 'red',
                radius: 8,
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
                     }
          });
        }
        else if($(this).val() == "label-data-4")
        {
           chart.series[0].data[3].update({
            marker:{
                fillColor: 'red',
                radius:8,
                symbol:
              'url(https://www.highcharts.com/samples/graphics/sun.png)'
                     }
           });
        }

});

JSFiddle