Question

使用某些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轴上显示价格。任何帮助将不胜感激，谢谢。

Answer 1

您需要将您的JSON转换为Highcharts格式，因为Highcharts既需要对象中的轴，也需要日期时间作为UNIX时间戳。

您还需要在xAxis中添加日期时间类型。

我的小提琴：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
  }]
});

使用Highcharts创建简单的折线图

1 个答案: