Question

我正在尝试在一个页面中添加多个条形图，但是当它们显示时，只是最后一个条形图正确显示。在之前的其他图表中，条形图未绘制

每个图表都有这两个变量（GraphOptionsX和GraphSeriesX）。

var GraphOptions0 = {
    chart:{renderTo: null,type: 'bar',height: 200,width: 300},
    title:{text:null},
    subtitle:{text:null},
    xAxis:{
        categories:null
    },
    yAxis:{min:0,title:{text: null},labels:{overflow: 'justify'}},
    tooltip:{formatter:function(){return '' + this.x + ' = ' + this.y;}},
    plotOptions:{bar:{dataLabels:{enabled: true}}},
    legend:{enabled: false},
    credits:{enabled: false},
    exporting:{enabled: false},
    series:[]
};
var GraphSeries0 = {
        name:"",
        data:[],
        point:{events:{click: null}}
};

在我生成图表之后（x = 0,1，...）：

var graphSeries = eval("GraphSeries" + x);

        graphSeries.name = "GraphSeries" + x;
        graphSeries.data.push({ y: parseInt(107),   color: 'red' });
        graphSeries.data.push({ y: parseInt(31),    color: 'blue' });
        graphSeries.data.push({ y: parseInt(635),   color: 'green' });
        graphSeries.data.push({ y: parseInt(203),   color: 'yellow' });
        graphSeries.data.push({ y: parseInt(2),     color: 'orange' });
        graphSeries.point.events.click = function() {
            alert ('Category: '+ this.category +', value: '+ this.y);
        }

        var graphOptions = eval("GraphOptions" + x);
        graphOptions.xAxis.categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];
        graphOptions.chart.renderTo = 'containerChart'+x;
        graphOptions.series.push(graphSeries);

        new Highcharts.Chart(graphOptions);

Answer 1

无法理解您的问题是什么，而是根据您的数据创建三个图表的演示：对于每个循环，您只需要清除数据数组和系列数组。

for(x = 0; x < 3; x++)
    {
    var graphSeries = eval("GraphSeries");
        graphSeries.data = [];

    graphSeries.name = "GraphSeries" + x;
    graphSeries.data.push({ y: parseInt(107 + x),   color: 'red' });
    graphSeries.data.push({ y: parseInt(31),    color: 'blue' });
    graphSeries.data.push({ y: parseInt(635),   color: 'green' });
    graphSeries.data.push({ y: parseInt(203),   color: 'yellow' });
    graphSeries.data.push({ y: parseInt(2),     color: 'orange' });
    graphSeries.point.events.click = function() {
        alert ('Category: '+ this.category +', value: '+ this.y);
    }

    var graphOptions = eval("GraphOptions");
        graphOptions.series = [];
    graphOptions.xAxis.categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];
    graphOptions.chart.renderTo = 'containerChart'+x;
    graphOptions.series.push(graphSeries);

    new Highcharts.Chart(graphOptions);
    }

以下是演示：http://jsfiddle.net/De8MB/1/

单个网页中的Highchart多条形图

1 个答案: