0

我正在尝试使用 Highcharts 显示图表。我正在使用 php 从 mysql db 中提取数据并创建数据数组并将它们插入到 Highcharts Jquery 中。

我需要以这种格式显示数据（不是图形表示）：

mon = 0
tues = 4
wed = 2
thu = 0
fri = 4
sat = 20
sun = 45

星期一总是第一个，星期天最后一个。

但是我的数据是使用日期范围从数据库中提取的，我可能只能从数据库中获取一个如下所示的数组：

Array
(
    [0] => Array
        (
            [TotalClicksPerDay] => 35
            [weekDay] => 4 (which is my case is Thurs)
        )
}

所以在这种情况下需要显示：（TotalClicksPerDay 是重要的一点） 

mon = 0
tues = 0
wed = 0
thu = 35
fri = 0
sat = 0
sun = 0

我如何将数组值添加到 Highchart 并仍然让一周中的几天显示和定位“周四”的值在正确的位置？

有没有人做过类似的事情？你能指出我正确的方向吗？我什至不知道如何开始。

这是我的 highcharts Jquery，这样您就可以看到我是如何使用数组的：

    jQuery(document).ready(function($) {
          var chart;
            $(document).ready(function() {
              chart = new Highcharts.Chart({
                chart: {
                  renderTo: 'container',
                  type: 'column'
                },
                title: {
                  text: '$type'
                },


   subtitle: {
              text: 'Xbox landscape'
            },
            xAxis: {
              categories: 
              $categoryGraph //php array
              ,labels: {
              rotation: 0,
                align: 'center',
                x: 0,
                y: 20,
                style: {
                  fontSize: '8px',
                  fontFamily: 'Verdana, sans-serif'
                }
              }
            },
            yAxis: {
              min: 0,
              title: {
                text: 'Clicks'
              }
            },
            legend:  {
                    enabled: false
                }, /*{
              layout: 'Vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 0,
                y: 30,
                floating: false,
                shadow: true
              },*/
             tooltip: {
                formatter: function() {
                  return ''+
                    this.x +': '+ this.y +' Clicks';
                  }
              },
              plotOptions: {
                column: {
                  pointPadding: 0.2,
                    borderWidth: 0
                }
              },
              series: [{name: '$type', data:[$clickTotalArray //php array }]
            });
        });
    });
4

1 回答 1

0

您在询问如何将您的数据解析为 highcharts 可以理解的内容？

好吧，您要正确设置的主要动态选项是 thexAxis.categories和 the series.data，您似乎已经弄清楚了。

categories

需要是一个字符串数组，不会接受更多或更少。

例如：-categories=['Mon','Tue','Wed']

data

需要是数组数组或对象数组或值数组。有关更多详细信息，请参阅文档

由于您的数据大多是简单的值，xValue 是一个字符串，因此属于类别，您的data对象需要是一个数字数组。

例如：-data=[100,200,300]

所以现在我们有了数据的最终形式，我们需要将可用的数据结构/对象图解析为这种形式。您可以选择在 PHP 或 JavaScript 中执行此操作。

这就是您可以在 javascript 中执行此操作的方法，请确保在调用Highchart构造函数之前执行此操作，并在设置选项时使用派生对象。

var superData = [{
    propertyA: 'A',
    propertyB: 10
}, {
    propertyA: 'B',
    propertyB: 15
}, {
    propertyA: 'C',
    propertyB: 1
}];

var seriesData = [],
    categories = [];
for (var i = 0; i < superData.length; i++) {
    //you may want to do a parseInt/parseFloat it this value is a string
    seriesData.push(superData[i].propertyB);
    categories.push(superData[i].propertyA);
}

...
    xAxis: {
        categories: categories
    },
    series: [{
        name: 'serie',
        type: 'column',
        data: seriesData
        }]
...

将复杂的 JSON 解析成 highchart 形式 | Highchart & Highstock @ jsFiddle

请参阅将 mysql 结果集转换为 (name, data) 对象以输入 HighCharts以查看如何在 PHP 中完成类似的事情

于 2013-01-21T19:24:11.353 回答