Highcharts根据点击进行更改

Posted 2021-05-05

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

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

例如 ：

我的单选按钮

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

[编辑]和我的高潮

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，highchart指向13 marc等时。

答案

假设您的单选按钮具有公共类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