Использование PHP для Highchart Heatmap

Question

У меня есть несколько вопросов. Я пытаюсь отобразить свои данные в Heatmap, например: ['2020-02-12', '12', 9] ['2020-02-13', '13', 12]. x - дата, y - неделя, а значение - данные.

Я преобразовал в ['2', '12', 9] ['2', '13', 12]. x - это месяц, а y - это дата.

Я использую PHP, чтобы получить данные, а затем js для отображения. Но ничего не отображается.

Это мой код:

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/heatmap.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="js/plugins/highcharts/js/highcharts.js"></script>
<script src="js/plugins/highcharts/plugins/export/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="js/plugins/highcharts/js/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">

 Highcharts.chart('container', {
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: 'air'
        },
        xAxis: {
            max:31,
            categories: ['2020-01', '2020-02','2020-03'],
            title:{
                text:"Date"
            }
        },
        yAxis: {
            categories: ['0', '1', '2', '3', '4', '5', '6', '7','8',
              '9', '10','11','12','13','14','15','16','17','18',
              '19','20','21','22','23','24','25','26','27','28',
              '29','30','31'],
            title: null
        },
        colorAxis: {
            stops: [
                [0, "#28FF28"],
                [0.2, "#FFDC35"],
                [0.4, "#FF8000"],
                [0.6, "#EA0000"],
                [0.8, "#9F4D95"],
                [1, "#750000"]
            ],
            min: 0,
            max:300
            // min: 0,
            // minColor: '#FFDC35',
            // maxColor: '#EA0000'
        },
        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },
        series: [{
            name: 'air_data',
            borderWidth: 1,
            data:<?php echo $data; ?>,
            turboThreshold:0,
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]
</script>

А это мой php код:

if ($stmt = $db->query($sql)) {
    while ($result = mysqli_fetch_array($stmt)) {
        $arr[] = array(
            date("n", strtotime($result['date'])),
            date("d", strtotime($result['date'])),
            intval($result['pm25'])
        );
    }
    $data = json_encode($arr);
    echo $data;
}

Я хочу показать как это фото

Answer 1

На стороне javascript требуется несколько шагов для использования данных json.

Предполагая, что структура данных является действительной (достаточной) для загрузки диаграммы в том виде, в котором вы ее отображаете,
используйте что-то вроде этого кода:

<script type="text/javascript">

  // json string into js var 
  var plainJson = '<?php echo $data; ?>';
  var jsData = JSON.parse(plainJson);

  Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
     ...
    series: [{
        name: 'air_data',
        borderWidth: 1,
        data: jsData,  // use jsData in chart
        turboThreshold:0,
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]
</script>

Обновление

Как вы упомянули в комментариях, кажется, что натуральное число месяца не извлекается из Строка «02».
Для карты нужны числовые данные, поэтому давайте преобразуем ее.

<script type="text/javascript">

  var                                     // declare all vars at once
      plainJson = '<?php echo $data; ?>', // json string into js var 
      jsData = JSON.parse(plainJson),     // string to js obj 
      parsedData = [],
      i
      ;

  // convert string values to integers
  for(i in jsData) {
      parsedData.push({
          month: parseInt(jsData[i].month, 10),
          day: parseInt(jsData[i].day, 10),
          value: jsData[i].value  // value is ok
      })
  }

  Highcharts.chart('container', {
      chart: {
        type: 'heatmap',
        ...
      series: [{
        name: 'air_data',
        borderWidth: 1,
        data: parsedData,  // use parsedData in chart
        ...
  }]
</script>