如何通过从下拉列表中选择来更改highcharts数据值

时间:2013-11-22 06:06:16

标签: ruby-on-rails highcharts highstock

我正在努力为不同的水果类型制作一个高潮图。我想制作一些水果的下拉列表,当用户选择其中一个水果时,图表会根据该水果而变化。我无法在highcharts文档中找到下拉列表的任何示例,highcharts是否允许下拉列表?

2 个答案:

答案 0 :(得分:3)

得到它......

For complete code click here

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline'
    },
    series: [{name: 'A', data: [1,2,3,2,1]}]
};
var chart = new Highcharts.Chart(options);

$("#list").on('change', function(){
    //alert('f')
    var selVal = $("#list").val();
    if(selVal == "A" || selVal == '')
    {
        options.series = [{name: 'A', data: [1,2,3,2,1]}]
    }
    else if(selVal == "B")
    {
        options.series = [{name: 'B', data: [3,2,1,2,3]}]
    }
    else if(selVal == "C")
    {
        options.series = [{name: 'C', data: [5,4,8,7,6]}]
    } 
    else
    {
        options.series = [{name: 'D', data: [4,7,9,6,2]}]
    }  
    var chart = new Highcharts.Chart(options);    
});

答案 1 :(得分:0)

在highcharts文档中,您可以使用按钮

来完善相同的示例

series.setData(); http://api.highcharts.com/highcharts#Series.setData()

的示例

你也可以在这里使用相同的example

在更改事件中应用相同的逻辑。