如何使用高图中的javascript从动态数据中显示多行

时间:2014-02-05 20:16:41

标签: javascript jsf highcharts

我有一个图表,它从jsf的下拉列表中选择用户输入,并根据项目选择生成图表。它工作得很好。但是如果我想一次选择多个项目并希望一次显示多行,那怎么可能呢?我知道我必须使用另一个jsf组件而不是下拉列表。但我不知道如何将多个数据系列同时传递给highcharts。我用于生成基于单个项目选择的图表的示例代码如下:

$('#container').highcharts({
    chart: {
        zoomType: 'xy',
        spacingRight: 20

    },

     title: {
        text: ''
    }, 

    xAxis: {
     startOnTick:true,
     showFirstLabel: true,
     endOnTick : true,
     showLastLabel:true,
     categories: dateAndTimeArray,
     tickInterval: 20,
     labels:{
     rotation:0.1,
     align: 'left',
     step: 12,   
     enabled: true

    },

    style: {
          fontSize: '8px'
       }
        }, 
    yAxis: {
        title: {
            text: 'Measurement value'
        }
    },
    tooltip: {
        xDateFormat: '%Y-%m-%d',
        shared: true
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            lineWidth: 1,
            marker: {
                enabled: false
            },
            shadow: false,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
          //  threshold: null
        }
    },

      series: [{
        type: 'line',
        name: 'Value',
        /* pointInterval: 0.75 * 3600 * 1000,
        pointStart: Date.UTC(2013, 1, 1),  */  
        data: chartData,
        marker: {
            enabled: false
        }

    }]   

    });

});

1 个答案:

答案 0 :(得分:1)

您没有包含使用所选数据更新图表的代码。所以,这只是一个普遍的答案。 highchart series对象可以包含多个元素:

series: [{series 1}, {series 2}]

您可以在ddl中获取所选项目的列表,然后迭代数据集以查找匹配项并将其用于addSeries