Javascript 使用Highcharts创建简单的折线图_Javascript_Django_Highcharts

Javascript 使用Highcharts创建简单的折线图

javascript django highcharts

Javascript 使用Highcharts创建简单的折线图,javascript,django,highcharts,Javascript,Django,Highcharts,我在创建一个包含JSON时间序列数据的折线图时遇到了一些困难。我的JSON数据如下所示： [{ 'close': 30.1361, 'date': '2017-07-05' }, { 'close': 29.7583, 'date': '2017-07-06' }, { 'close': 29.9326, 'date': '2017-07-07' }] <!doctype html> <html> <head> <meta

我在创建一个包含JSON时间序列数据的折线图时遇到了一些困难。我的JSON数据如下所示：

[{
  'close': 30.1361,
  'date': '2017-07-05'
}, {
  'close': 29.7583,
  'date': '2017-07-06'
}, {
  'close': 29.9326,
  'date': '2017-07-07'
}]

<!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>

此外，我通过Django/Python提供我的网页，因此上面的JSON数据存储在一个变量中，该变量如下：

{{one_yr | safe}

目前我有一个空白图表，y轴上的数字为0-140，x轴上的数字为零，没有绘图。到目前为止，我的代码如下所示：

[{
  'close': 30.1361,
  'date': '2017-07-05'
}, {
  'close': 29.7583,
  'date': '2017-07-06'
}, {
  'close': 29.9326,
  'date': '2017-07-07'
}]

<!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>


Django Highcharts示例
Highcharts.chart（'容器'{
图表：{
类型：“行”
},
标题：{
文字：“一年期股价”
},
系列：[{
名称：“{stock.ticker}}”，
数据：{一年|安全}
}]
});

我希望创建一个非常简单的折线图，日期在x轴上，价格在y轴上。任何帮助都将不胜感激，谢谢

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

您还需要在xAxis中添加datetime类型

我的小提琴：

您需要将JSON转换为Highcharts格式，因为Highcharts需要对象中的axis和作为UNIX时间戳的datetime

您还需要在xAxis中添加datetime类型

我的小提琴：