Построение диаграммы Highcharts из нескольких точек данных в json

Question

У меня есть массив json, который я собираю в php в формате ...

[{"timestamp":"2018-05-30 00:33:05","temperature":"67.39","humidity":"66.57","pressure":"99.21"},{

И у меня есть диаграмма хай-чартов на моем сайте ...

<script>
        $(function(){
            $.getJSON('getdata.php?id=allTemp', function(json){
                $('#container').highcharts({
                    series: [{
                        data: json
                    }],
                    title: {
                        text: 'Title'
                    }
                })
            })
        })
    </script>
    <div id="container" style="width:100%; height:400px;"></div>

Но нет ничего графического, нужно ли присваивать каждое значение каждой оси?Моя цель состоит в том, чтобы иметь время на одной оси и 3 других значения (температура, влажность и давление) на оси Y.

Answer 1

Вам необходимо установить другую ось, назначить каждое значение ряду, построенному на одной из этих осей.Поскольку это довольно распространенный вопрос, в разных формах я сделал это для вас.Используя ваш пример JSON в качестве входных данных.

Основные моменты:

• Используйте свой json для создания серии для каждого отдельного параметра.
• Используйте тип xAxis datetime, конвертируя вашу дату в миллисекунды (так как это то, что принимает старшие диаграммы).
• Создайте ось для каждого параметра, для которого вы хотите иметь собственную ось, и настройте ряд для использования этой оси.

var json = [{
  "timestamp": "2018-05-30 00:33:05",
  "temperature": "67.39",
  "humidity": "66.57",
  "pressure": "99.21"
}, {
  "timestamp": "2018-05-30 00:35:05",
  "temperature": "45.39",
  "humidity": "69.57",
  "pressure": "99.00"
}]

$(function() {
  //create temporary arrays for each series
  var temperature = [],
    humidity = [],
    pressure = [];
  //loop through incoming json and push to respective series
  $.each(json, function(i, el) {
    let tmpTimestamp = new Date(el.timestamp).getTime() //get the millisecond representation of the timestamp
    temperature.push({
      x: tmpTimestamp,
      y: parseFloat(el.temperature)
    })
    humidity.push({
      x: tmpTimestamp,
      y: parseFloat(el.humidity)
    })
    pressure.push({
      x: tmpTimestamp,
      y: parseFloat(el.pressure)
    })
  })
  //Create array containing all series
  var series = [{
    name: 'Temperature',
    data: temperature
  }, {
    name: 'Humidity',
    data: humidity,
    yAxis: '1'
  }, {
    name: 'Pressure',
    data: pressure,
    yAxis: '2'
  }]

  $('#container').highcharts({
    series: series,
    xAxis: {
      type: 'datetime', //use the datetime type, so that highcharts knows the x-data is formatted by millisecond
      minPadding: 0.1, //add some extra space on the left side of data
      maxPadding: 0.1, //add some extra space on the right side of data
      tickInterval: 1000 * 60 //one tick every 60 seconds
    },
    //give each series its own axis, colored the same as the series
    yAxis: [{
      id: '0',
      title: {
        text: 'Temperature',
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
        format: '{value}°C',
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      }
    }, {
      id: '1',
      opposite: true,
      title: {
        text: 'Humidity',
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      },
      labels: {
        format: '{value}%',
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      }
    }, {
      id: '2',
      opposite: true,
      title: {
        text: 'Pressure',
        style: {
          color: Highcharts.getOptions().colors[2]
        }
      },
      labels: {
        format: '{value}mb',
        style: {
          color: Highcharts.getOptions().colors[2]
        }
      }
    }],
    title: {
      text: 'Title'
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

<div id="container" style: "min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JSFiddle пример: https://jsfiddle.net/dx9pntab/6/