javascript - 将数据放在指定日期的 highcharts 中

Question

我目前正在使用 highcharts 制作月度图表，我想在指定日期输出数据，我该怎么办？我刚刚学习如何使用动态数据来使用 highcharts。

这是我的代码:

    <?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"projects");

    /* Getting purchases table data */
    $sql = "SELECT SUM(total_cost) as count FROM purchases
            GROUP BY MONTH(`date`) ORDER BY `date`";
    $purchases = mysqli_query($link,$sql);
    $purchases = mysqli_fetch_all($purchases,MYSQLI_ASSOC);
    $purchases = json_encode(array_column($purchases, 'count'),JSON_NUMERIC_CHECK);


    /* Getting sales table data */
    $sql = "SELECT SUM(product_total) as count FROM confirm_order_product
            GROUP BY MONTH(`date`) ORDER BY `date`";
    $sales = mysqli_query($link,$sql);
    $sales = mysqli_fetch_all($sales,MYSQLI_ASSOC);
    $sales = json_encode(array_column($sales, 'count'),JSON_NUMERIC_CHECK);



?>
<script type="text/javascript">

/*series: [{
        name: 'Sales',
          data: data_sales,
         // pointStart: Date.UTC(2018, 1, 1),
         //  pointInterval: 24 * 3600 * 1000

      },{
         name: 'Purchases',
        data: data_purchases
     //   pointStart: Date.UTC(2018, 1, 1),
     //    pointInterval: 24 * 3600 * 1000
   }]*/

$(function () {


    var data_sales = <?php echo $sales; ?>;
    var data_purchases = <?php echo $purchases; ?>;


    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Sales and Purchases'
        },
        xAxis: {
            //categories: ['January','February','March','April','May','June','July','August','Sepmtember','October','November','December']
            type: 'datetime',
           dateTimeLabelFormats: {


      month: '%b ',

           },
           title: {
               text: 'Date'
           }
        },

        series: [{
            name: 'Sales',
            data: data_sales

        }, {
            name: 'Purchases',
            data: data_purchases
        }]
    });
});

我有九月、十一月、十二月的数据，其余月份没有数据，当我运行代码时，它显示一月、二月和三月而不是真实日期。

Answer 1

如果您的数据不包含日期，您必须在图表选项中指定它。第一种方法是使用 datetime 轴并设置适当的 pointStart 和 pointInterval:

plotOptions: {
    series: {
      pointStart: Date.UTC(2018, 8, 1),
      pointInterval: 30 * 24 * 3600 * 1000,
    }
}

演示: https://jsfiddle.net/BlackLabel/o4cq132m/

第二种方法是使用这样的类别:

xAxis: {
    type: 'category',
    categories: ['Sepmtember','October','November','December'],
    title: {
      text: 'Date'
    }
}

演示: https://jsfiddle.net/BlackLabel/h9ykq7mf/3/

当您的数据包含日期时，您可以这样提供:

  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [
      [1535752800000, 122], // [timestamp in milliseconds, value]
      [1538344800000, 131],
      [1541026800000, 111],
      [1543618800000, 120]
    ]
  }]

演示:
https://jsfiddle.net/BlackLabel/zhynkgoa/

API引用:
https://api.highcharts.com/highcharts/series.line.data