javascript - 努力将此 JSON 数据放入 highcharts

Question

我有以下代码片段，它从 JSON URL 获取数据并将其输入 MariaDB。

现在我想将该数据从数据库中取出(因为数据库随着时间的推移记录了 JSON)，然后将其放入图表中，但是我很难将数据从 JSON URL 中取出到 highcharts 中。 . 我的数据是这样的:

[{"time":"1509488314","hashrate":"34096322642","minersTotal":"99"},
{"time":"1509490093","hashrate":"34096645609","minersTotal":"101"},
{"time":"1509490201","hashrate":"34096374421","minersTotal":"101"},
{"time":"1509490321","hashrate":"34138925733","minersTotal":"101"},
{"time":"1509490441","hashrate":"34062086317","minersTotal":"101"},
{"time":"1509490561","hashrate":"34116887228","minersTotal":"101"},
{"time":"1509490681","hashrate":"34053449517","minersTotal":"103"},
{"time":"1509490801","hashrate":"34060600882","minersTotal":"103"},
{"time":"1509490921","hashrate":"34065888457","minersTotal":"103"},
{"time":"1509491041","hashrate":"34093378965","minersTotal":"105"}]

我希望基本上绘制横跨 X 轴的时间，将哈希率绘制为一条线，并将 minersTotal 绘制为一条条。

我已经完成了 PHP/MariaDB 部分，但事实证明，完成这部分对我来说是一场斗争。

我的 php 代码:

$mysqli = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $mysqli->query("SELECT * FROM hashrates LIMIT 100")) {

    while($row = $result->fetch_object()) {
            $myArray[] = $row;
    }
    echo json_encode($myArray);
}

$result->close();
$mysqli->close();

Answer 1

根据这个 demo (Highcharts Demos › Dual axes, line and column) 。数据必须是值数组，例如:["Item1", "Item2", "Item3"]。

有了你的数据，你可以使用 Array#map() 。

var times = data.map(function(x) {
  return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
  return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
  return x.minersTotal * 1;
});

你可以这样做:

(function() {
  var data = [{
      "time": "1509488314",
      "hashrate": "34096322642",
      "minersTotal": "99"
    },
    {
      "time": "1509490093",
      "hashrate": "34096645609",
      "minersTotal": "101"
    },
    {
      "time": "1509490201",
      "hashrate": "34096374421",
      "minersTotal": "101"
    },
    {
      "time": "1509490321",
      "hashrate": "34138925733",
      "minersTotal": "101"
    },
    {
      "time": "1509490441",
      "hashrate": "34062086317",
      "minersTotal": "101"
    },
    {
      "time": "1509490561",
      "hashrate": "34116887228",
      "minersTotal": "101"
    },
    {
      "time": "1509490681",
      "hashrate": "34053449517",
      "minersTotal": "103"
    },
    {
      "time": "1509490801",
      "hashrate": "34060600882",
      "minersTotal": "103"
    },
    {
      "time": "1509490921",
      "hashrate": "34065888457",
      "minersTotal": "103"
    },
    {
      "time": "1509491041",
      "hashrate": "34093378965",
      "minersTotal": "105"
    }
  ];
  var times = data.map(function(x) {
    return new Date(x.time * 1000);
  });
  var hashrates = data.map(function(x) {
    return x.hashrate * 1;
  });
  var minersTotals = data.map(function(x) {
    return x.minersTotal * 1;
  });

  Highcharts.chart("container", {
    chart: {
      zoomType: "xy"
    },
    title: {
      text: "Data"
    },
    subtitle: {
      text: "Subtitle"
    },
    xAxis: [{
      categories: times,
      crosshair: true
    }],
    yAxis: [{ // Primary yAxis.
      labels: {
        format: "{value}",
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      },
      title: {
        text: "Hashrate",
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      }
    }, { // Secondary yAxis.
      title: {
        text: "MinersTotal",
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
        format: "{value}",
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      opposite: true
    }],
    tooltip: {
      shared: true
    },
    legend: {
      layout: "vertical",
      align: "left",
      x: 120,
      verticalAlign: "top",
      y: 100,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF"
    },
    series: [{
      name: "MinersTotal",
      type: "column",
      yAxis: 1,
      data: minersTotals,
      tooltip: {
        valueSuffix: ""
      }
    }, {
      name: "Hashrate",
      type: "line",
      data: hashrates,
      tooltip: {
        valueSuffix: ""
      }
    }]
  });
})();

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin: 0 auto; min-width: 310px;"></div>

让我知道这是否适合您。