努力将这些 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

根据这个演示（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>

让我知道这是否适合您。

Answer 2

我最终选择了这个

$(function () {
    var hashrates = new Array();
    var minersTotal = new Array();

    function refreshdata() {
        $.getJSON("data.json", function(data) {
            var hashrates = new Array();
            var minersTotal = new Array();
            for (i = 0; i < data.length; i++) {
                var object = data[i];
                var time = object.time * 1000;
                hashrates.push([time, parseFloat(object.hashrate) / 1000000000]);
                minersTotal.push([time, parseFloat(object.minersTotal)]);
            }
            $('#container').highcharts().series[0].setData(minersTotal, true);
            $('#container').highcharts().series[1].setData(hashrates, true);
            $('#container').highcharts().redraw();
        });
    }

    $('#container').highcharts({
        chart: {
            backgroundColor: "rgba(0,0,0,0)",
            color: "#FF0000",
            alignTicks: false,
            events: {
                load: function () {
                    setInterval(function () {refreshdata();}, 60000);
                }
            }
        },
        title: {
            text: "Pool performance"
        },
        subtitle: {
            text: "3 days (15 min intervals)"
        },
        tooltip: {
            shared: true,
            valueDecimals: 2
        },
        legend: {
            layout: "horizontal"
        },
        xAxis: {
            title: {
                text: "Time (UTC)"
            },
            type: "datetime",
            showFirstLabel: true
        },
        yAxis: [{
            title: {
                text: "Hashrate (GH/s)"
            },
            labels: {
                style: {
                    color: "#434348"
                },
                formatter: function() {
                    return this.axis.defaultLabelFormatter.call(this).toString().substr(0,4);
                }
            },
            gridLineColor: "#434348",
            tickInterval: 10,
            min: 0
        },{
            title: {
                text: "Miners",
                style: {
                    color: "#95CEFF"
                },
            },
            labels: {
                style: {
                    color: "#95CEFF"
                }
            },
            opposite: true,
            tickInterval: 40,
            gridLineColor: "#95CEFF"
        }],

        series: [{
            name: "Miners",
            type: "spline",
            data: minersTotal,
            yAxis: 1
        },{
            name: "Hashrate",
            data: hashrates,
            type: "spline"
        }]
    });
    refreshdata();
});

它可以在这里看到： https : //metaverse.farm/