我正在尝试使用Django和highcharts在网络上显示图表。

我已经将JSON格式的对象作为my_data从Python文件传递到HTML文件。 为了使数据适合高图表模型,我必须在JavaScript(将日期对象与值配对)内进行一些修改。

我对JavaScript和HTML完全陌生,未显示图表。

下面是我的HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
    var obj = {{ my_data | safe }};
    function parseDate(s) {
        var b = s.split(/\D+/);
        return new Date(Date.UTC(2016, --b[1], b[2]));
    };
    var lst = [];
    var date;
    for (date in obj) {
        var day_record = [parseDate(date['time']), date['pnl']];
        lst.push(day_record);
    };
    var result = lst.sort();

        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'accumulated pnl'
            },
            series: [{
                name: 'pnl',
                data: result
            }]
        });
    </script>
</head>

<body>
    <h1> Accumulated pnl over time </h1>
    <hr>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

my_data可以这样在网络上显示:

[{"pnl": -4214918.830000036, "time": "2016-03-23 00:00:00"}, {"pnl": -5223615.250000035, "time": "2016-03-28 00:00:00"}, {"pnl": 23250409.1, "time": "2016-01-20 00:00:00"}, {"pnl": 12716814.320000006, "time": "2016-02-25 00:00:00"}, {"pnl": -9925980.870001037, "time": "2016-04-06 00:00:00"}]

我已经通过控制台尝试了代码,并收到以下错误。

VM683:1 Uncaught SyntaxError: Unexpected token {
    at Object.InjectedScript._evaluateOn (<anonymous>:145:167)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:137:25)
    at Object.InjectedScript.evaluate (<anonymous>:118:14)

如果有人可以给我一些建议,我将不胜感激!

===============>>#1 票数:0

检查一下并与您的代码进行比较:

var obj = {{my_data|safe}};
function parseDate(s) {
  var b = s.split(/\D+/);
  return new Date(Date.UTC(2016, --b[1], b[2]));
};

var lst = [];
var date;
for(date in obj){
  var day_record = [parseDate(date['time']), date['pnl']];
  lst.push(day_record);
};
var result = lst.sort();

您的$定位符号错误...

编辑

也不知道为什么使用jQuery来调用最后一部分,我认为只需要做highcharts部分:

$('#container').highcharts('StockChart', {
  rangeSelector : {
    selected : 1
  },

  title : {
    text : 'accumulated pnl'
  },

  series : [
    {
      name : 'pnl',
      data : result
    }]
  });

那也应该工作

  ask by LL15 translate from so

未解决问题?本站智能推荐: