使用数据时间和匹配x轴到y轴的线图的Hicharts数据API

I am having a problem populating and matching the x-axis and the y-axis using highcharts.

我在使用highcharts填充和匹配x轴和y轴时遇到问题。

Am not sure how highcharts handles data, but my thinking is that on the x-axis i populate the dates for the last week and then on the Y-axis have the total amount collect for that day.

我不确定highcharts如何处理数据,但我的想法是在x轴上我填充上周的日期,然后在Y轴上有当天收集的总金额。

My data will have the coordinate for x-axis and y-axis and the name.

我的数据将包含x轴和y轴的坐标以及名称。

Problem : My problem is my data is not consistent. Reason being, for a particular date I might not have any transaction. Hence no transactions for that date.

问题:我的问题是我的数据不一致。原因是,对于特定日期,我可能没有任何交易。因此,该日期没有交易。

Question 1 Is there a way round this ?

问题1这有什么办法吗?

Question 2

can i auto generate datetime using highchart xAxis option and then match these points from my data set ?

我可以使用highchart xAxis选项自动生成日期时间,然后匹配我的数据集中的这些点吗?

I am not limited to change my data structure, any advise on how to go about is highly appreciated.

我不仅限于更改我的数据结构,任何关于如何进行的建议都受到高度赞赏。

The data set format was in reference to

数据集格式参考

https://jsfiddle.net/f2bnc2ox/

Have a look at my jsfiddle

看看我的jsfiddle

https://jsfiddle.net/chapskev/ao1m9s9r/3/

   [
       {
          "name":"Open Air Market",
          "data":[
             [
                "2016-06-16",
                450
             ],
             [
                "2016-06-17",
                1980
             ],
             [
                "2016-06-18",
                1650
             ],
             [
                "2016-06-19",
                420
             ],
             [
                "2016-06-20",
                630
             ],
             [
                "2016-06-21",
                660
             ]
          ],
          "keys":[
             "name",
             "y"
          ]
       },
       {
          "name":"Parking Fee",
          "data":[
             [
                "2016-06-17",
                300
             ],
             [
                "2016-06-21",
                1000
             ]
          ],
          "keys":[
             "name",
             "y"
          ]
       },
       {
          "name":"Fisheries Daily Revenue",
          "data":[
             [
                "2016-06-21",
                200
             ]
          ],
          "keys":[
             "name",
             "y"
          ]
       }
    ]

1 个解决方案

#1

Your question isn't super clear, and I'm not sure this will help anyone else, but I do quite a bit with multidimensional arrays and HighCharts, so I figured I'd take a stab at helping. Making the assumption that your data array is named $aData (for example code).

你的问题不是很清楚,我不确定这会对其他人有什么帮助,但我对多维数组和HighCharts做了很多,所以我想我会帮助你。假设您的数据数组名为$ aData(例如代码)。

//INIT VARS
$cSeries = '';
$cXAxis = '';
$bAxis = true;

//LOOP TO BUILD SERIES
foreach ($aData AS $nPos => $aSet) {

  //FIRST PASS? BUILD AXIS
  if ($bAxis) {
    $cXAxis .= "xAxis: {\n" .
               "    categories: ['" . implode("','", array_keys($aSet['data'])) . "']\n" .
               "}, ";

    $bAxis = false; //NEED ONLY ONCE
  }

  $cSeries .= ", {\n" .
              "    name: '" . $aSet['name'] . "',\n" .
              "    data: [" . implode(",", $aSet['data']) . "]\n" .
              "}";
}

$cSeries = substr($cSeries, 2); //REMOVE LEADING COMMA
$cOutput = "series: [" . $cSeries . "]\n" . $cXAxis;

At the end, $cOutput equals

最后,$ cOutput等于

series: [{
  name: 'A revenue',
  data: [7700,5000]
}, {
  name: 'B revenue',
  data: [390,210]
}]
xAxis: {
  categories: ['4','5']
},

This matches the two examples of data you are trying to create I believe. You may want to loop through the categories (instead of using implode) so that you can name them something like Apr, May instead.

这与我相信您尝试创建的两个数据示例相匹配。您可能希望遍历类别(而不是使用implode),以便您可以将它们命名为Apr,May。