Javascript Highcharts:使用CSV的热图
我正在尝试通过CSV文件加载数据。现在,如果我已经把它作为一个隐藏的div放在页面上,那么它工作得很好。但是试图通过Jquery$.get从CSV文件加载它是不起作用的。x轴和y轴显示,但热图本身不显示 javascript在没有实际文件的情况下如下所示:Javascript Highcharts:使用CSV的热图,javascript,highcharts,heatmap,Javascript,Highcharts,Heatmap,我正在尝试通过CSV文件加载数据。现在,如果我已经把它作为一个隐藏的div放在页面上,那么它工作得很好。但是试图通过Jquery$.get从CSV文件加载它是不起作用的。x轴和y轴显示,但热图本身不显示 javascript在没有实际文件的情况下如下所示: $.get('http://www.urltofile.com/cell001.csv', function(csv) { generateHeatMap($('#heatmapBody'),csv); }); function gen
$.get('http://www.urltofile.com/cell001.csv', function(csv) {
generateHeatMap($('#heatmapBody'),csv);
});
function generateHeatMap(target,data) {
target.highcharts({
chart: {
type: 'heatmap',
//height: highChartsArguments.chartHeight
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts extended heat map',
style: {
color: 'black',
fontSize: '12px',
fontFamily: 'Verdana'
}
},
xAxis: {
type: 'text',
min: 0,
max: 427,
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
tickWidth: 1,
min: 0,
max: 133,
reversed: true
},
colorAxis: {
max: 1.5,
min: -1.5,
minColor: '#00FF00',
maxColor: '#FF0000',
stops: [
[0.0, '#00FF00'],
[0.5, '#003319'],
[0.9, '#FF0000'],
[1, '#FF0000']
]
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 60
},
series: [{
name: 'heatmap',
data: {
csv: data
},
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
tooltip: {
headerFormat: 'Test<br/>',
pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
exporting: {
enabled: false
}
});
}
任何帮助都将不胜感激。您加载的数据不正确。Series对象不负责处理csv数据。如果使用,应将数据从系列选项移动到顶级选项,如下所示:
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]
将您的代码与官方示例进行比较:您在控制台中看到了哪些错误?@有趣的是,没有错误。非常感谢!作为一个海图新手,我很感激!
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]