所以基本上我一直试图使用Flask在2x3网格中显示图表。 (总共6张图表)但我甚至得不到一张。
我正在看这个:http://www.highcharts.com/demo/line-time-series
默认示例似乎有效。但是,当我在localhost:5000 / data托管我自己的数据并使用highcharts加载它时,根本没有任何东西出现。我认为数据格式错误。
我的数据格式为
{'2016-04-22': 3,
'2016-04-25': 1,
'2016-04-26': 1,
'2016-04-29': 12,
'2016-05-03': 2}
但该链接中的数据是
?([
[Date.UTC(2013,5,2),0.7695],
[Date.UTC(2013,5,3),0.7648],
[Date.UTC(2013,5,4),0.7645],
[Date.UTC(2013,5,5),0.7638]]
这是一个小提琴链接(忽略data.csv,它应该是数据) https://jsfiddle.net/d8xgno5d/
有人有任何指示?真的很绝望了。我已经尝试过csv,但我不知道如何将链接中的csv数据加载到highchars中。
所有帮助将非常感激:)
谢谢你! :)答案 0 :(得分:2)
对于那些感兴趣的人,我设法为load csv方法解决了这个问题。
将.getJSON的第一行替换为
$.get('http://localhost:5000/data.csv',function(csv){
你可以加载CSV,这在python中使用pandas要容易得多。
如果需要,这是javascript文件的完整代码。
$(document).ready(function () {
$.get('http://localhost:5000/data.csv',function(csv){
$('#workload').highcharts({
chart: {
zoomType: 'x'
},
data: {
csv: csv
},
title: {
text: 'Evie Workload'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Emails'
}
},
legend: {
enabled: false
},
credits:{
enabled:false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Workload',
}]
});
});
});