使用 PHP 制作 Highchart 热图

Question

我有一些问题。 我正在尝试在热图中显示我的数据，例如：['2020-02-12', '12', 9] ['2020-02-13', '13', 12]。 x 是日期，y 是星期，value 是数据。

我转换为 ['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>

更新

正如您在 cmets 中提到的，似乎月份的自然数不是从“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>