使用日期时间并将 x 轴与 y 轴匹配的折线图的 Highcharts 数据 API答案

【问题标题】：Hicharts data API for line graph using datatime and matching x-axis to y-axis使用日期时间并将 x 轴与 y 轴匹配的折线图的 Highcharts 数据 API
【发布时间】：2016-05-27 17:12:21
【问题描述】：

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

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

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

问题： 我的问题是我的数据不一致。原因是，在特定日期，我可能没有任何交易。因此，该日期没有交易。

问题 1 有没有办法解决这个问题？

问题 2

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

我不限于改变我的数据结构，任何关于如何去的建议 about 受到高度赞赏。

数据集格式参考

https://jsfiddle.net/f2bnc2ox/

看看我的 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"
          ]
       }
    ]

【问题讨论】：

在 JS 中数组从 0 开始索引，所以 [4] 是第 5 个元素。你需要的图表应该是这样的吗？ - jsfiddle.net/f2bnc2ox你的数据数组在 JS 中的样子？
@KacperMadej 谢谢你，jsfiddle 帮了我。
@KacperMadej 我已经按照 jsfiddle 用我的 json 编辑了我的问题。我仍然无法填充折线图。请帮帮我
Welp，我看不到最近的编辑。最后一次编辑是从 5 月 27 日 17:21 开始。也许您还可以发布一个 JSFiddle 演示，将硬编码的 JSON 数据返回给 JS？
您需要为每个数据点设置x - jsfiddle.net/ao1m9s9r/4 Highcharts 不会将名称与类别或以前的系列名称匹配，您应该设置x。如果您使用datetime 键入xAxis 并将您的字符串解析为时间戳格式的日期（自1970.01.01 以来的毫秒数），那么您将拥有x 作为每个点的日期。示例：jsfiddle.net/ornrsyzm

标签： javascript php json highcharts

【解决方案1】：

您的问题不是很清楚，我不确定这对其他人是否有帮助，但我在多维数组和 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;

最后，$cOutput 等于

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

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

【讨论】：