【发布时间】：2015-07-13 14:08:58
【问题描述】：
我在 Highcharts 4 中使用 jQuery 1.9.1 设置了一个简单的柱形图，我在其中解析了一个 CSV 文件。我得到带有柱形图的正常页面，但是当我点击一个栏时没有任何反应。实际上，我确实看到在控制台 (IE11) 中创建了数组，它们似乎正是我所需要的，它们的语法正确且 ID 匹配。
JS 小提琴 [是...://jsfiddle.net/tjxwty3y/ ...我在底部的编辑中更改了这个]。我举了一个我使用的 CSV 示例，但不知道如何将外部链接到 JS Fiddle。我已经尝试了在代码中嵌入 CSV/TSV 的示例并且它们已经起作用，所以我认为这与我推送数据的方式有关，因此与外部参考有关。
CSV 非常简单。我在第一列中有 3 个类别，它们的值用于前面的图表，然后是第三列中的 ID，最后是第四和第五列中的向下钻取值。
CSV looks like this
AREA,VALUE,TYPE,SHIFT1,SHIFT2
Blog1,50000,Blog1_Shift,5,6
Blog2,60000,Blog2_Shift,2,3
Blog3,40000,Blog3_Shift,7,8
我查看了多个帖子（和一些视频），其中 CSV 或 TSV 在 JS Fiddle 和 Highcharts 网站上，但我完全没有看到我哪里出错了（我知道我有）。
以防万一，这里是来自 js fiddle 的原始数据，其中包含库（我通常使用 Higcharts 4 和 JQuery 1.11，但在这里我修改了一些使用 JQuery 1.9.1 的旧代码）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://code.highcharts.com/highcharts.js"></script>
<script type='text/javascript' src="http://code.highcharts.com/modules/data.js"></script>
<script type='text/javascript' src="http://code.highcharts.com/modules/drilldown.js"></script>
<style type='text/css'></style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'My Title Here'
},
xAxis: {
categories: [],
name: []
},
yAxis: {
title: {
text: 'Value Here'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 15,
borderWidth: 0,
itemStyle: {
color: '#333',
fontSize: '15px',
},
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '15px',
}
}
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
marker: {
lineWidth: 1
}
}
},
series: [],
drilldown: []
};
$.get("http://my/csv/notvalid/dev_drilldown4.csv", function (csvData) {
var lines = csvData.split('\n');
var series = {
data: [],
visible: true,
type: 'column',
colorByPoint: true,
drilldown: true
};
var drilldown = {
series: []
};
$.each(lines, function (lineNo, line) {
if (lineNo > 0 && lineNo < 4) {
var items = line.split(',');
var seriesname = String(items[0]); // this is the area
var area_cost = parseFloat(items[1]); // this is the data for the rollup
var drill_id = String(items[2]); // this will be the id of the drilldown
var shift_one_value = parseFloat(items[3]); // shift1 value
var shift_two_value = parseFloat(items[4]); // shift2 value
series.data.push({
name: seriesname,
y: area_cost,
drilldown: drill_id
});
drilldown.series.push({
id: drill_id,
data: [["shift1", shift_one_value],["shift2", shift_two_value]]
});
}
});
console.log(series.data);
console.log(drilldown.series);
options.series.push({ data: series.data });
options.drilldown.push({ series: drilldown.series });
var chart = new Highcharts.Chart(options);
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
感谢任何帮助/建议。 谢谢
编辑： 现在我已经添加了 Salman 和 Pawell 的编辑，包括将 CSV 添加到 jsFiddle（请参阅 Pawell 的 jsFiddle 了解它现在的样子）我遇到了一个额外的问题，但它现在/正在工作！
我意识到我忘记了系列的“名称”并添加了它，调整了“var series”并将“series.data.push”更改为“series.push”，并按照 Salman 的说明观看了日志。现在什么都没有出现，但控制台日志似乎显示了带有名称、ID 和数据的数据，但没有图表（也没有错误）。
js 小提琴是：http://jsfiddle.net/5jzb8hzb/1/。您知道为什么更改“series.data.push”会导致初始图表无法呈现吗？
【问题讨论】：
-
您可以将 csv 文件 (my/csv/notvalid/dev_drilldown4.csv) 上传到 Web 服务器并再次运行 jsFiddle 吗？
-
感谢萨尔曼，这最初帮助很大，并且确实开始发挥作用。我按照 Pawel 的建议添加了嵌入式 csv 和 innerHTML（尽管仍在尝试使其正常工作）。感谢您对查看日志中的选项的建议，这帮助我看到了差异。接下来我会评论 Pawel 的。
标签： javascript jquery html csv highcharts