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