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>

请告诉我这是否适合您。

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/

苦苦于将这个JSON数据放入高级图表中

2 个答案: