因此,基本上我一直试图使用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中。
所有帮助将不胜感激:)
谢谢你!:)
对于那些感兴趣的人,我设法为load csv方法解决了它。
通过将.getJSON的第一行替换为
$.get('http://localhost:5000/data.csv',function(csv){
您可以加载CSV,而当您可以在python中使用熊猫时,这样做会容易得多。
如果需要,这是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',
}]
});
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句