2

1 つのページに複数の棒グラフを追加しようとしていますが、それらが表示されると、最後の棒グラフだけが正しく表示されます。他の前のチャートでは、バーはグラフ化されていません

各グラフにこの 2 つの変数 (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);
4

1 に答える 1

0

何が問題なのか理解できませんでしたが、データに従って 3 つのグラフを作成するデモ: for each ループでは、データ配列と系列配列をクリアするだけです。

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/

于 2013-01-31T22:20:55.317 に答える