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 вам нужно удалить теги script из вашего кода js. Теперь запустите jsHint - хороший соус взглянуть на все эти красные точки. Неплохо, хотя, просто исправьте то, что он вам говорит.

Теперь главный вопрос в этой части:

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

Это не определено longcurrSeries.data2.length becuase он не имеет elment из data2. Вы должны сделать это:

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

Fix вы другие ошибки синтаксиса (я оставил функцию, объявленную в одиночку сейчас петли), и я бы определенно изменить имя переменной для long-happycontainer к чему-то более стандартизированной (старайтесь не иметь операторов в именах var), и вы получаете это jsFiddle.