Возникли проблемы при построении JSON-данных в HighCharts - PullRequest
Новая
       1

Возникли проблемы при построении JSON-данных в HighCharts

0 голосов
/ 10 октября 2018

В настоящее время я извлекаю данные, которые я хочу нарисовать в виде простого графика на моей странице.Пока мой код выглядит так: 

    var test = [{'minute': '09:30', 'close': 286.54}, {'minute': '09:45', 'close': 285.93}, {'minute': '10:00', 'close': 284.915}, {'minute': '10:15', 'close': 284.435}, {'minute': '10:30', 'close': 284.96}, {'minute': '10:45', 'close': 284.33}, {'minute': '11:00', 'close': 284.1}, {'minute': '11:15', 'close': 283.29}, {'minute': '11:30', 'close': 283.32}, {'minute': '11:45', 'close': 283.21}, {'minute': '12:00', 'close': 283.25}, {'minute': '12:15', 'close': 283.52}, {'minute': '12:30', 'close': 283.17}, {'minute': '12:45', 'close': 283.245}, {'minute': '13:00', 'close': 282.9}, {'minute': '13:15', 'close': 283.21}, {'minute': '13:30', 'close': 283.13}, {'minute': '13:45', 'close': 283.18}]

    Highcharts.chart('my-container', {
        chart: {
            type: 'area',
        },
        series: [{
            data: test,
        }] /* series */
    });

Однако, это просто возвращает пустой график.Любая идея о том, где я иду не так (я очень плохо знаком с JS)?Спасибо

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Диаграмма пуста, потому что ваша структура данных неверна, и Highcharts не знает, что с этим делать.Если вам нужно оставить структуру данных такой, какая она есть сейчас, вы можете быстро подготовить функцию, которая будет обрабатывать определенные данные в нужную структуру, например, как показано ниже: 

function processData(data) {
    var arr = [];
  data.forEach(p => {
        arr.push({
        name: p.minute,
      y: p.close
    })
    })

  return arr
}

Затем просто вызовите эту функцию series.data в качестве значения series.data: 

Highcharts.chart('container', {
        chart: {
            type: 'area',
        },
        series: [{
            data: processData(test),
        }] /* series */
    });

Живой пример: https://jsfiddle.net/60gs2b7c/

С уважением!

0 голосов
/ 11 октября 2018

Я просто беру 5 пунктов из ваших данных и отображаю: 

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
   </head>
   <body>
      <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
      <script language="JavaScript">
         $(document).ready(function () {
             var chart = {
                 type: 'bar'
             };
             var title = {
                 text: 'Example of your chart'
             };
             var subtitle = {
                 text: 'Source: Wikipedia.org'
             };
             var xAxis = {
                 categories: ['09:30', '09:45', '10:00', '10:15', '10:30'],
                 title: {
                     text: null
                 }
             };
             var yAxis = {
                 min: 0,
                 title: {
                     text: 'unit (inches)',
                     align: 'high'
                 },
                 labels: {
                     overflow: 'justify'
                 }
             };
             var tooltip = {
                 valueSuffix: ' unit'
             };
             var plotOptions = {
                 bar: {
                     dataLabels: {
                         enabled: true
                     }
                 }
             };
             var legend = {
                 layout: 'vertical',
                 align: 'right',
                 verticalAlign: 'top',
                 x: -40,
                 y: 100,
                 floating: true,
                 borderWidth: 1,
         
                 backgroundColor: (
                     (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'),
                 shadow: true
             };
             var credits = {
                 enabled: false
             };
             var series = [
                 {
                     name: '09:30',
                     data: [286.54]
                 },
                 {
                     name: '09:45',
                     data: [285.93]
                 },
                 {
                     name: '10:00',
                     data: [284.915]
                 },
                 {
                     name: '10:15',
                     data: [284.435]
                 },
                 {
                     name: '10:30',
                     data: [284.96]
                 },
             ];
         
             //var test = [{ 'minute': '09:30', 'close': 286.54 },
             //    { 'minute': '09:45', 'close': 285.93 },
             //    { 'minute': '10:00', 'close': 284.915 },
             //    { 'minute': '10:15', 'close': 284.435 },
             //    { 'minute': '10:30', 'close': 284.96 },
             //    { 'minute': '10:45', 'close': 284.33 },
             //    { 'minute': '11:00', 'close': 284.1 },
             //    { 'minute': '11:15', 'close': 283.29 },
             //    { 'minute': '11:30', 'close': 283.32 },
             //    { 'minute': '11:45', 'close': 283.21 },
             //    { 'minute': '12:00', 'close': 283.25 },
             //    { 'minute': '12:15', 'close': 283.52 },
             //    { 'minute': '12:30', 'close': 283.17 },
             //    { 'minute': '12:45', 'close': 283.245 },
             //    { 'minute': '13:00', 'close': 282.9 },
             //    { 'minute': '13:15', 'close': 283.21 },
             //    { 'minute': '13:30', 'close': 283.13 },
             //    { 'minute': '13:45', 'close': 283.18 }]
             var json = {};
             json.chart = chart;
             json.title = title;
             json.subtitle = subtitle;
             json.tooltip = tooltip;
             json.xAxis = xAxis;
             json.yAxis = yAxis;
             json.series = series;
             json.plotOptions = plotOptions;
             json.legend = legend;
             json.credits = credits;
             $('#container').highcharts(json);
         });
      </script>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...