Question

这可能是一个简单的解决办法，但我一直在与它斗争，以至于我不再“看到”它了。

尝试在一个页面上显示两个图表。一个是包含两个比较组的柱形图，另一个是显示时间序列的纵向列。它们都是动态生成的（那部分工作正常），但对于我的生活，我无法让它们同时显示。如果我删除一个，则显示另一个，但不能同时显示两个。

我将不胜感激任何帮助！

这是jsfiddle，它给出了错误//]]＆gt;，我真的不知道这意味着什么。

<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的元素。你需要这样做：

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

修复你的其他语法错误（我现在单独留下在循环中声明的函数）并且我肯定会将long-happycontainer的变量名更改为更标准化的东西（尽量不要在var名称中使用运算符）和你得到这个jsFiddle。

Highcharts页面上的两个图表

1 个答案: