Highchartjs基于点击更改

Question

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

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

例如：

我的单选按钮

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

[编辑] and my highchart

when select label-data-1

when select label-data-2

when select label-data-3

when select label-data-4 等。

所以当我选择的标签数据-1，highchart点变化到3月11日，当我选择无标记data-2，highchart指向3月12日，当我选择label-data-3，highchart指向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