Highchartjs基于点击更改

  • Z时代
  • 2024-01-10
  • 分类：问答

我尝试使用高图来构建图表。我有一个单选按钮来选择数据。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(/wp-content/uploads/new2022/20220327voicc/126152553.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(/wp-content/uploads/new2022/20220327voicc/126152553.png)' 
        } 
      }); 
     } 
     else if($(this).val() == "label-data-3") 
     { 
      chart.series[0].data[2].update({ 
      marker:{ 
       fillColor: 'red', 
       radius: 8, 
       symbol: 'url(/wp-content/uploads/new2022/20220327voicc/126152553.png)' 
        } 
      }); 
     } 
     else if($(this).val() == "label-data-4") 
     { 
      chart.series[0].data[3].update({ 
      marker:{ 
       fillColor: 'red', 
       radius:8, 
       symbol: 
       'url(/wp-content/uploads/new2022/20220327voicc/126152553.png)' 
        } 
      }); 
     } 
});

JSFiddle

以上是 Highchartjs基于点击更改 的全部内容， 来源链接： utcz.com/qa/260836.html

回到顶部