Question

我尝试使用highchart来构建图表。我有一个单选按钮来选择数据。

那么，如何根据单击单选按钮更改高图上的数据。

例如：

我的单选按钮

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

[EDITED] 和我的高潮

when select label-data-1

when select label-data-2

when select label-data-3

when select label-data-4 等。

所以当我选择label-data-1时，高亮点改为3月11日，当我选择label-data-2时，高图指向3月12日，当我选择label-data-3时，高图指向13 marc，等。

Answer 1

Suppose your radio button has a common class str_rad and name radbutton than you can bind an on-click event on the radio button.

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

Highchartjs根据点击进行更改

1 个答案: