Блог

Главная - Вопросы по программированию - highchart с определенным форматом json в django

highchart с определенным форматом json в django

#javascript #json #charts #highcharts

Вопрос:

Я получил данные из 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
        }
      }
    },

  });

Ответ №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/Черная метка/z74pyfbj/

Ссылка на API: https://api.highcharts.com/highcharts/series.column.data

Метки: