Highcharts頁面上的兩個圖表

Question

這可能是一個簡單的解決方法，但是我一直在與之抗爭，以至於我不再“看到”它了。

試圖在一頁上顯示兩個圖表。 一個是包含兩個比較組的柱形圖，另一個是顯示時間序列的縱向組。 它們都是動態生成的（該部分工作正常），但就我的一生而言，我無法同時顯示它們。 如果刪除一個，則顯示另一個，但不能同時顯示兩個。

我將不勝感激任何幫助！

這是jsfiddle，它給出錯誤///]]>，我真的不知道它是什么意思。

<script>
$(function () {
var data = [

{"unit":"Apples", "status":"John", "val":3.0000},

{"unit":"Apples", "status":"Julia", "val":4.0000},

{"unit":"Apples", "status":"Liz", "val":3.2308},

{"unit":"Apples", "status":"Bob", "val":3.3574},

{"unit":"Apples", "status":"Chuck", "val":3.0847},

{"unit":"Apples", "status":"BillyBob", "val":3.5385},

{"unit":"Apples", "status":"Cindy", "val":3.4444},

{"unit":"Apples", "status":"Blanche", "val":3.1992},

{"unit":"Oranges", "status":"John", "val":3.6000},

{"unit":"Oranges", "status":"Liz", "val":3.5000},

{"unit":"Oranges", "status":"Bob", "val":3.5344},

{"unit":"Oranges", "status":"Chuck", "val":3.4828},

{"unit":"Oranges", "status":"BillyBob", "val":3.7143},

{"unit":"Oranges", "status":"Cindy", "val":3.7500},

{"unit":"Oranges", "status":"Blanche", "val":3.4526},

{"unit":"Unclassified", "status":"John", "val":0.0000},

{"unit":"Unclassified", "status":"Liz", "val":0.0000},

{"unit":"Unclassified", "status":"Bob", "val":1.1429},

{"unit":"Unclassified", "status":"Chuck", "val":1.0625},

{"unit":"Unclassified", "status":"BillyBob", "val":0.7500},

{"unit":"Unclassified", "status":"Cindy", "val":1.0000},

{"unit":"Unclassified", "status":"Blanche", "val":1.2500},

];

var datalong = [


{"longunit":"2004", "longstatus":"Apples", "longval":3.2},

{"longunit":"2006", "longstatus":"Apples", "longval":3.2},

{"longunit":"2009", "longstatus":"Apples", "longval":3.3},

{"longunit":"2011", "longstatus":"Apples", "longval":3.4},

{"longunit":"2004", "longstatus":"Oranges", "longval":3.4},

{"longunit":"2006", "longstatus":"Oranges", "longval":3.5},

{"longunit":"2009", "longstatus":"Oranges", "longval":3.5},

{"longunit":"2011", "longstatus":"Oranges", "longval":3.6},

];


var seriesData = [];
var xCategories = [];

var i, cat;
for(i = 0; i < data.length; i++){
cat = data[i].unit;
if(xCategories.indexOf(cat) === -1){
xCategories[xCategories.length] = cat;
}
}

for(i = 0; i < data.length; i++){
if(seriesData){
var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
if(currSeries.length === 0){
seriesData[seriesData.length] = currSeries = {name: data[i].status, data: []};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {name: data[i].status, data: [data[i].val]}
}
}


var longseriesData = [];
var longxCategories = [];

var longcat;
for(i = 0; i < data2.length; i++){
longcat = data2[i].unit;
if(longxCategories.indexOf(cat) === -1){
longxCategories[longxCategories.length] = longcat;
}
}


for(i = 0; i < data2.length; i++){
if(longseriesData){
var longcurrSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data2[i].status;});

if(longcurrSeries.length === 0){
longseriesData[longseriesData.length] = longcurrSeries = {name: data2[i].status, data: []};
} else {
longcurrSeries = longcurrSeries[0];
}
var longindex = longcurrSeries.data2.length;
longcurrSeries.data2[index] = data2[i].val;
} else {
longseriesData[0] = {name: data2[i].status, data: [data2[i].val]}
}
}


var happycontainer;
$(document).ready(function() {
happycontainer= new Highcharts.Chart({
chart: {
renderTo: 'container-happycontainer',
type: 'column'
},
title: {
text: 'column chart'
},
xAxis: {
categories: xCategories
},
yAxis: {
min: 0,
title: {
    text: 'Testing Question 1'
},
stackLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    }
}
},

series: seriesData
});
});

});


var long-happycontainer;
$(document).ready(function() {
long-happycontainer= new Highcharts.Chart({
chart: {
renderTo: 'long-container-happycontainer',
type: 'line'
},

colors: ['#0D26E7', '#B20000'],

title: {
text: 'Testing Question 2'
},
xAxis: {
categories: xCategories
},

yAxis: {
min: 0,
title: {
    text: 'Means of Responses'
},
},

plotOptions: {
series: {
lineWidth: 3
}
},
series:  seriesData 

});
});

});
</script>

http://jsfiddle.net/bCU2E/155/

Answer 1

您需要大量清理js語法。 但是，主要問題是您要在哪里設置索引長度，而變量聲明不在范圍內。 在jsFiddle中，您還需要從js代碼塊中刪除script標簽。 現在，運行jsHint-肉汁看起來不錯，所有這些紅點。 不過還不錯，只要修正它告訴您的內容即可。

現在，主要問題是這部分：

var longindex = longcurrSeries.data2.length;
longcurrSeries.data2[index] = data2[i].val;

這是未定義的longcurrSeries.data2.length因為它沒有data2 longcurrSeries.data2.length 。 您需要這樣做：

var longindex = longcurrSeries.data.length;
longcurrSeries.data[index] = data2[i].val;

修復其他語法錯誤（我long-happycontainer循環中聲明該函數），並且我肯定會將long-happycontainer變量名更改為更標准化的名稱（嘗試在var名稱中不要使用運算符），然后您將得到jsFiddle 。