Django 中具有特定 json 格式的高图

Question

我从 api 收到了这种格式的数据：

[{"t":"2010-05-06T00:00:00Z","v":294},
{"t":"2010-05-07T00:00:00Z","v":103},
{"t":"2010-05-08T00:00:00Z","v":293},
{"t":"2010-05-09T00:00:00Z","v":113}]

我怎样才能用他们在我的网站上用highchart绘制图表。 “t”必须转换为“时间”，“v”必须转换为“体积”

这是我的 JS 文件。我需要尽可能多地留在图表中属性。

  Highcharts.chart('container', {
  
    chart: {
      scrollablePlotArea: {
        minWidth: 700
      }
    },
  
    data: {
    },
  
  
    xAxis: {
      tickInterval: 7 * 24 * 3600 * 1000, // one week
      tickWidth: 0,
      gridLineWidth: 1,
      labels: {
        align: 'left',
        x: 3,
        y: -3
      }
    },
  
    yAxis: [{ // left y axis
      title: {
        text: null
      },
  
    legend: {
      align: 'left',
      verticalAlign: 'top',
      borderWidth: 0
    },
  
    tooltip: {
      shared: true,
      crosshairs: true
    },
  
    plotOptions: {
      series: {
        cursor: 'pointer',
        className: 'popup-on-click',
        marker: {
          lineWidth: 1
        }
      }
    },

  });

Answer 1

您需要将数据映射到 Highcharts 要求的格式。

const data = [{
        "t": "2010-05-06T00:00:00Z",
        "v": 294
    },
    ...
];

const seriesData = data.map(dataEl => [new Date(dataEl.t).getTime(), dataEl.v]);

Highcharts.chart('container', {
    ...,
    series: [{
        data: seriesData
    }]
});

现场演示： http://jsfiddle.net/BlackLabel/z74pyfbj/

API参考：https://api.highcharts.com/highcharts/series.column.data

Django 中具有特定 json 格式的高图

highchart with a specific json format in django

javascript

charts

json

highcharts