使用PHP for Highchart Heatmap

Question

我有几个问题要问。我尝试在热图中显示我的数据，比如：'2020-02-12'，'12'，9。x是日期，y是星期，value是数据。

我转换为“2”，“12”，9。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>