• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Highchartjs基于点击更改

JavaScript 来源:teguh11 8次浏览

我尝试使用高图来构建图表。我有一个单选按钮来选择数据。Highchartjs基于点击更改

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

例如:

我的单选按钮

  • 标签数据-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等。


===========解决方案如下:

假设您的单选按钮的通用类别为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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)