使用Highcharts創建簡單的折線圖
[英]Creating a Simple Line Chart with Highcharts
問題描述
我在使用一些JSON時間序列數據創建折線圖時遇到了一些困難。 我的JSON數據如下所示：
[{
'close': 30.1361,
'date': '2017-07-05'
}, {
'close': 29.7583,
'date': '2017-07-06'
}, {
'close': 29.9326,
'date': '2017-07-07'
}]
另外，我通過Django / Python為我的網頁提供服務，因此上面的JSON數據存儲在一個看起來像這樣的變量中： {{ one_yr|safe }}
目前，我有一個空白圖表，y軸上的數字為0-140，x軸上沒有任何內容，沒有圖。 到目前為止，我的代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Django Highcharts Example</title>
</head>
<body>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'One Year Stock Price'
},
series: [{
name: '{{ stock.ticker }}',
data: {{ one_yr|safe }}
}]
});
</script>
</body>
</html>
我希望創建一個非常簡單的折線圖，在x軸上顯示日期，在y軸上顯示價格。 任何幫助將不勝感激，謝謝。
1 個解決方案
解決方案1
1 已采納 2018-07-05 22:03:36
您需要將您的JSON轉換為Highcharts格式，因為Highcharts同時需要對象中的軸和日期時間作為UNIX時間戳。
您還需要在xAxis中添加datetime類型。
我的小提琴： https : //jsfiddle.net/1ro6hqy8/
var one_yr = [{
'close': 30.1361,
'date': '2017-07-05'
}, {
'close': 29.7583,
'date': '2017-07-06'
}, {
'close': 29.9326,
'date': '2017-07-07'
}]
one_yr = one_yr.map(function(e) {
return {
'y': e.close,
'x': new Date(e.date).getTime()
}
})
Highcharts.chart('container', {
title: {
text: 'One Year Stock Price'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
series: [{
data: one_yr
}]
});
d3.js使用DateTime和int數組創建一個簡單的折線圖
[英]d3.js creating a simple line chart with array of DateTime and int
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.