highcharts使用json填充数据

时间：2018-08-19 13:53:23

标签： json highcharts

我创建了一个.php文件，用于将数据从mysql导出为json格式。

[{"name":"data1","data":[[{"name":"InfluxCoin","data":[[1534032000000,0.87]]},{"name":"Advanced","data":[[1534032000000,0.02]]},{"name":"MarijuanaCoin","data":[[1534032000000,0.27]]},{"name":"HomeblockCoin","data":[[1534032000000,0.65]]},{"name":"StartCoin","data":[[1534032000000,0.11]]},{"name":"U.C.C.","data":[[1534032000000,1.45]]},{"name":"PioneerCoin","data":[[1534032000000,0.23]]},{"name":"Phantomx","data":[[1534032000000,0.58]]},{"name":"IDApay","data":[[1534032000000,0.03]]},{"name":"MarxCoin","data":[[1534032000000,0.51]]},{"name":"AdzCoin","data":[[1534032000000,0.42]]},{"name":"Magnet","data":[[1534032000000,1.64]]},{"name":"Phantomx","data":[[1534032000000,0.04]]},{"name":"PioneerCoin","data":[[1534032000000,0.38]]},{"name":"MarxCoin","data":[[1534118400000,0.56]]},{"name":"Phantomx","data":[[1534118400000,0.20]]},{"name":"MarijuanaCoin","data":[[1534118400000,0.10]]},{"name":"Advanced","data":[[1534118400000,0.01]]},{"name":"InfluxCoin","data":[[1534118400000,0.26]]},{"name":"U.C.C.","data":[[1534118400000,0.87]]},{"name":"Polis","data":[[1534118400000,4.48]]},{"name":"PioneerCoin","data":[[1534118400000,0.40]]},{"name":"Magnet","data":[[1534118400000,0.68]]},{"name":"HomeblockCoin","data":[[1534118400000,0.65]]},{"name":"ONIX","data":[[1534118400000,2.32]]},{"name":"Dollar PAC","data":[[1534118400000,2.36]]},{"name":"OmegaCoin","data":[[1534118400000,0.03]]},{"name":"AdzCoin","data":[[1534118400000,0.40]]},{"name":"ONIX","data":[[1534118400000,1.16]]},{"name":"OmegaCoin","data":[[1534118400000,0.03]]},{"name":"PioneerCoin","data":[[1534118400000,0.23]]},{"name":"Phantomx","data":[[1534204800000,0.68]]},{"name":"OmegaCoin","data":[[1534204800000,0.55]]},{"name":"ONIX","data":[[1534204800000,12.97]]},{"name":"MarijuanaCoin","data":[[1534204800000,0.26]]},{"name":"Advanced","data":[[1534204800000,0.02]]},{"name":"U.C.C.","data":[[1534204800000,1.74]]},{"name":"Pura","data":[[1534204800000,1.44]]},{"name":"TECAX","data":[[1534204800000,0.00]]},{"name":"Nero","data":[[1534204800000,0.00]]},{"name":"Xeon","data":[[1534204800000,0.00]]},{"name":"ZexCoin","data":[[1534204800000,0.00]]},{"name":"Polis","data":[[1534204800000,4.43]]},{"name":"AdzCoin","data":[[1534204800000,0.79]]},{"name":"InfluxCoin","data":[[1534204800000,0.26]]},{"name":"StartCoin","data":[[1534204800000,0.35]]},{"name":"Sucre","data":[[1534204800000,0.00]]},{"name":"Magnet","data":[[1534204800000,0.62]]},{"name":"HomeblockCoin","data":[[1534204800000,0.21]]},{"name":"OmegaCoin","data":[[1534204800000,0.03]]},{"name":"Phantomx","data":[[1534204800000,0.04]]},{"name":"ONIX","data":[[1534204800000,1.62]]},{"name":"HomeblockCoin","data":[[1534204800000,0.10]]},{"name":"U.C.C.","data":[[1534204800000,0.58]]},{"name":"StartCoin","data":[[1534204800000,0.03]]},{"name":"Magnet","data":[[1534291200000,3.99]]},{"name":"OmegaCoin","data":[[1534291200000,0.44]]},{"name":"ONIX","data":[[1534291200000,8.80]]},{"name":"StartCoin","data":[[1534291200000,0.42]]},{"name":"Phantomx","data":[[1534291200000,1.21]]},{"name":"PioneerCoin","data":[[1534291200000,0.67]]},{"name":"U.C.C.","data":[[1534291200000,3.47]]},{"name":"InfluxCoin","data":[[1534291200000,0.09]]},{"name":"MarxCoin","data":[[1534291200000,4.50]]},{"name":"HomeblockCoin","data":[[1534291200000,0.41]]},{"name":"MarijuanaCoin","data":[[1534291200000,0.06]]},{"name":"Nero","data":[[1534291200000,0.00]]},{"name":"TECAX","data":[[1534291200000,0.00]]},{"name":"Xeon","data":[[1534291200000,0.00]]},{"name":"ZexCoin","data":[[1534291200000,0.00]]},{"name":"Sucre","data":[[1534291200000,0.00]]},{"name":"ONIX","data":[[1534291200000,0.23]]},{"name":"U.C.C.","data":[[1534291200000,1.45]]},{"name":"Phantomx","data":[[1534291200000,0.04]]},{"name":"U.C.C.","data":[[1534377600000,14.18]]},{"name":"OmegaCoin","data":[[1534377600000,0.21]]},{"name":"AdzCoin","data":[[1534377600000,1.16]]},{"name":"Phantomx","data":[[1534377600000,0.38]]},{"name":"ONIX","data":[[1534377600000,7.18]]},{"name":"Pura","data":[[1534377600000,0.72]]},{"name":"MarijuanaCoin","data":[[1534377600000,0.10]]},{"name":"Magnet","data":[[1534377600000,0.70]]},{"name":"PioneerCoin","data":[[1534377600000,0.47]]},{"name":"StartCoin","data":[[1534377600000,0.03]]},{"name":"HomeblockCoin","data":[[1534377600000,0.10]]},{"name":"Polis","data":[[1534377600000,2.77]]},{"name":"U.C.C.","data":[[1534377600000,2.03]]},{"name":"U.C.C.","data":[[1534464000000,13.31]]},{"name":"OmegaCoin","data":[[1534464000000,0.28]]},{"name":"Phantomx","data":[[1534464000000,0.20]]},{"name":"MarijuanaCoin","data":[[1534464000000,0.21]]},{"name":"ONIX","data":[[1534464000000,6.48]]},{"name":"HomeblockCoin","data":[[1534464000000,0.50]]},{"name":"Dollar PAC","data":[[1534464000000,2.28]]},{"name":"PioneerCoin","data":[[1534464000000,1.41]]},{"name":"MarxCoin","data":[[1534464000000,2.39]]},{"name":"AdzCoin","data":[[1534464000000,0.38]]},{"name":"StartCoin","data":[[1534464000000,0.07]]},{"name":"Magnet","data":[[1534464000000,3.21]]},{"name":"InfluxCoin","data":[[1534464000000,0.17]]},{"name":"Quaz","data":[[1534464000000,0.63]]},{"name":"Kurrent","data":[[1534464000000,0.26]]},{"name":"Prime-XI","data":[[1534464000000,0.31]]},{"name":"CitrusCash","data":[[1534464000000,0.11]]},{"name":"Quaz","data":[[1534464000000,0.64]]},{"name":"Prime-XI","data":[[1534464000000,0.08]]},{"name":"U.C.C.","data":[[1534464000000,2.03]]},{"name":"Kurrent","data":[[1534464000000,0.31]]},{"name":"Phantomx","data":[[1534464000000,0.04]]},{"name":"StartCoin","data":[[1534464000000,0.03]]},{"name":"ONIX","data":[[1534464000000,1.62]]},{"name":"CitrusCash","data":[[1534464000000,0.03]]},{"name":"OmegaCoin","data":[[1534464000000,0.02]]},{"name":"Quaz","data":[[1534550400000,3.40]]},{"name":"Dollar PAC","data":[[1534550400000,6.85]]},{"name":"Prime-XI","data":[[1534550400000,2.80]]},{"name":"PioneerCoin","data":[[1534550400000,1.50]]},{"name":"U.C.C.","data":[[1534550400000,12.15]]},{"name":"OmegaCoin","data":[[1534550400000,0.62]]},{"name":"ONIX","data":[[1534550400000,3.47]]},{"name":"HomeblockCoin","data":[[1534550400000,0.34]]},{"name":"Phantomx","data":[[1534550400000,0.44]]},{"name":"MarijuanaCoin","data":[[1534550400000,0.72]]},{"name":"Kurrent","data":[[1534550400000,2.62]]},{"name":"InfluxCoin","data":[[1534550400000,0.08]]},{"name":"StartCoin","data":[[1534550400000,0.62]]},{"name":"CitrusCash","data":[[1534550400000,0.22]]},{"name":"Advanced","data":[[1534550400000,0.01]]},{"name":"Polis","data":[[1534550400000,3.09]]},{"name":"AdzCoin","data":[[1534550400000,1.33]]},{"name":"Prime-XI","data":[[1534550400000,0.33]]},{"name":"AdzCoin","data":[[1534550400000,0.32]]},{"name":"Quaz","data":[[1534550400000,0.24]]},{"name":"MarijuanaCoin","data":[[1534550400000,0.09]]},{"name":"ONIX","data":[[1534550400000,0.52]]},{"name":"HomeblockCoin","data":[[1534550400000,0.08]]},{"name":"Phantomx","data":[[1534550400000,0.02]]},{"name":"Advanced","data":[[1534550400000,0.00]]},{"name":"StartCoin","data":[[1534550400000,0.06]]}]]}]

我用asdf-postgres plugin验证了json，一切看起来都很好。

然后我创建了php以显示图形并请求json输出。

<?php

$user = $_GET['algo'];
if(!$user) return;

echo <<<end
<div id="graph" class="live_graph" style="height: 900px;"></div>
end;
?>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$.getJSON('/site/graph_coins_mined_results?algo=<?php echo $user; ?>', function (data) {
    Highcharts.stockChart('graph', {
        tooltip: { enabled: true },
        chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: data[0].data
});
});
</script>

由于某些原因，数据不会填充。但是当我使用与json相同的数据进行演示时，效果很好。

<?php

$user = $_GET['algo'];
if(!$user) return;

echo <<<end
<div id="graph" class="live_graph" style="height: 900px;"></div>
end;
?>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$.getJSON('/site/graph_coins_mined_results?algo=<?php echo $user; ?>', function (data) {
    Highcharts.stockChart('graph', {
        tooltip: { enabled: true },
        chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{"name":"InfluxCoin","data":[[1534032000000,0.87]]},{"name":"Advanced","data":[[1534032000000,0.02]]},{"name":"MarijuanaCoin","data":[[1534032000000,0.27]]},{"name":"HomeblockCoin","data":[[1534032000000,0.65]]},{"name":"StartCoin","data":[[1534032000000,0.11]]},{"name":"U.C.C.","data":[[1534032000000,1.45]]},{"name":"PioneerCoin","data":[[1534032000000,0.23]]},{"name":"Phantomx","data":[[1534032000000,0.58]]},{"name":"IDApay","data":[[1534032000000,0.03]]},{"name":"MarxCoin","data":[[1534032000000,0.51]]},{"name":"AdzCoin","data":[[1534032000000,0.42]]},{"name":"Magnet","data":[[1534032000000,1.64]]},{"name":"Phantomx","data":[[1534032000000,0.04]]},{"name":"PioneerCoin","data":[[1534032000000,0.38]]},{"name":"MarxCoin","data":[[1534118400000,0.56]]},{"name":"Phantomx","data":[[1534118400000,0.20]]},{"name":"MarijuanaCoin","data":[[1534118400000,0.10]]},{"name":"Advanced","data":[[1534118400000,0.01]]},{"name":"InfluxCoin","data":[[1534118400000,0.26]]},{"name":"U.C.C.","data":[[1534118400000,0.87]]},{"name":"Polis","data":[[1534118400000,4.48]]},{"name":"PioneerCoin","data":[[1534118400000,0.40]]},{"name":"Magnet","data":[[1534118400000,0.69]]},{"name":"HomeblockCoin","data":[[1534118400000,0.65]]},{"name":"ONIX","data":[[1534118400000,2.32]]},{"name":"Dollar PAC","data":[[1534118400000,2.36]]},{"name":"OmegaCoin","data":[[1534118400000,0.03]]},{"name":"AdzCoin","data":[[1534118400000,0.41]]},{"name":"ONIX","data":[[1534118400000,1.16]]},{"name":"OmegaCoin","data":[[1534118400000,0.03]]},{"name":"PioneerCoin","data":[[1534118400000,0.23]]},{"name":"Phantomx","data":[[1534204800000,0.68]]},{"name":"OmegaCoin","data":[[1534204800000,0.55]]},{"name":"ONIX","data":[[1534204800000,12.98]]},{"name":"MarijuanaCoin","data":[[1534204800000,0.26]]},{"name":"Advanced","data":[[1534204800000,0.02]]},{"name":"U.C.C.","data":[[1534204800000,1.74]]},{"name":"Pura","data":[[1534204800000,1.44]]},{"name":"TECAX","data":[[1534204800000,0.00]]},{"name":"Nero","data":[[1534204800000,0.00]]},{"name":"Xeon","data":[[1534204800000,0.00]]},{"name":"ZexCoin","data":[[1534204800000,0.00]]},{"name":"Polis","data":[[1534204800000,4.44]]},{"name":"AdzCoin","data":[[1534204800000,0.79]]},{"name":"InfluxCoin","data":[[1534204800000,0.26]]},{"name":"StartCoin","data":[[1534204800000,0.35]]},{"name":"Sucre","data":[[1534204800000,0.00]]},{"name":"Magnet","data":[[1534204800000,0.62]]},{"name":"HomeblockCoin","data":[[1534204800000,0.21]]},{"name":"OmegaCoin","data":[[1534204800000,0.03]]},{"name":"Phantomx","data":[[1534204800000,0.04]]},{"name":"ONIX","data":[[1534204800000,1.62]]},{"name":"HomeblockCoin","data":[[1534204800000,0.10]]},{"name":"U.C.C.","data":[[1534204800000,0.58]]},{"name":"StartCoin","data":[[1534204800000,0.03]]},{"name":"Magnet","data":[[1534291200000,4.00]]},{"name":"OmegaCoin","data":[[1534291200000,0.44]]},{"name":"ONIX","data":[[1534291200000,8.81]]},{"name":"StartCoin","data":[[1534291200000,0.42]]},{"name":"Phantomx","data":[[1534291200000,1.21]]},{"name":"PioneerCoin","data":[[1534291200000,0.67]]},{"name":"U.C.C.","data":[[1534291200000,3.48]]},{"name":"InfluxCoin","data":[[1534291200000,0.09]]},{"name":"MarxCoin","data":[[1534291200000,4.51]]},{"name":"HomeblockCoin","data":[[1534291200000,0.41]]},{"name":"MarijuanaCoin","data":[[1534291200000,0.06]]},{"name":"Nero","data":[[1534291200000,0.00]]},{"name":"TECAX","data":[[1534291200000,0.00]]},{"name":"Xeon","data":[[1534291200000,0.00]]},{"name":"ZexCoin","data":[[1534291200000,0.00]]},{"name":"Sucre","data":[[1534291200000,0.00]]},{"name":"ONIX","data":[[1534291200000,0.23]]},{"name":"U.C.C.","data":[[1534291200000,1.45]]},{"name":"Phantomx","data":[[1534291200000,0.04]]},{"name":"U.C.C.","data":[[1534377600000,14.20]]},{"name":"OmegaCoin","data":[[1534377600000,0.21]]},{"name":"AdzCoin","data":[[1534377600000,1.16]]},{"name":"Phantomx","data":[[1534377600000,0.38]]},{"name":"ONIX","data":[[1534377600000,7.19]]},{"name":"Pura","data":[[1534377600000,0.72]]},{"name":"MarijuanaCoin","data":[[1534377600000,0.10]]},{"name":"Magnet","data":[[1534377600000,0.70]]},{"name":"PioneerCoin","data":[[1534377600000,0.47]]},{"name":"StartCoin","data":[[1534377600000,0.03]]},{"name":"HomeblockCoin","data":[[1534377600000,0.10]]},{"name":"Polis","data":[[1534377600000,2.78]]},{"name":"U.C.C.","data":[[1534377600000,2.03]]},{"name":"U.C.C.","data":[[1534464000000,13.33]]},{"name":"OmegaCoin","data":[[1534464000000,0.28]]},{"name":"Phantomx","data":[[1534464000000,0.20]]},{"name":"MarijuanaCoin","data":[[1534464000000,0.21]]},{"name":"ONIX","data":[[1534464000000,6.49]]},{"name":"HomeblockCoin","data":[[1534464000000,0.50]]},{"name":"Dollar PAC","data":[[1534464000000,2.28]]},{"name":"PioneerCoin","data":[[1534464000000,1.41]]},{"name":"MarxCoin","data":[[1534464000000,2.39]]},{"name":"AdzCoin","data":[[1534464000000,0.38]]},{"name":"StartCoin","data":[[1534464000000,0.07]]},{"name":"Magnet","data":[[1534464000000,3.21]]},{"name":"InfluxCoin","data":[[1534464000000,0.17]]},{"name":"Quaz","data":[[1534464000000,0.63]]},{"name":"Kurrent","data":[[1534464000000,0.26]]},{"name":"Prime-XI","data":[[1534464000000,0.31]]},{"name":"CitrusCash","data":[[1534464000000,0.12]]},{"name":"Quaz","data":[[1534464000000,0.64]]},{"name":"Prime-XI","data":[[1534464000000,0.08]]},{"name":"U.C.C.","data":[[1534464000000,2.03]]},{"name":"Kurrent","data":[[1534464000000,0.31]]},{"name":"Phantomx","data":[[1534464000000,0.04]]},{"name":"StartCoin","data":[[1534464000000,0.03]]},{"name":"ONIX","data":[[1534464000000,1.62]]},{"name":"CitrusCash","data":[[1534464000000,0.03]]},{"name":"OmegaCoin","data":[[1534464000000,0.02]]},{"name":"Quaz","data":[[1534550400000,3.41]]},{"name":"Dollar PAC","data":[[1534550400000,6.86]]},{"name":"Prime-XI","data":[[1534550400000,2.81]]},{"name":"PioneerCoin","data":[[1534550400000,1.50]]},{"name":"U.C.C.","data":[[1534550400000,12.17]]},{"name":"OmegaCoin","data":[[1534550400000,0.62]]},{"name":"ONIX","data":[[1534550400000,3.48]]},{"name":"HomeblockCoin","data":[[1534550400000,0.34]]},{"name":"Phantomx","data":[[1534550400000,0.44]]},{"name":"MarijuanaCoin","data":[[1534550400000,0.72]]},{"name":"Kurrent","data":[[1534550400000,2.62]]},{"name":"InfluxCoin","data":[[1534550400000,0.08]]},{"name":"StartCoin","data":[[1534550400000,0.62]]},{"name":"CitrusCash","data":[[1534550400000,0.22]]},{"name":"Advanced","data":[[1534550400000,0.01]]},{"name":"Polis","data":[[1534550400000,3.10]]},{"name":"AdzCoin","data":[[1534550400000,1.33]]},{"name":"Prime-XI","data":[[1534550400000,0.33]]},{"name":"AdzCoin","data":[[1534550400000,0.32]]},{"name":"Quaz","data":[[1534550400000,0.24]]},{"name":"MarijuanaCoin","data":[[1534550400000,0.09]]},{"name":"ONIX","data":[[1534550400000,0.52]]},{"name":"HomeblockCoin","data":[[1534550400000,0.08]]},{"name":"Phantomx","data":[[1534550400000,0.02]]},{"name":"Advanced","data":[[1534550400000,0.00]]},{"name":"StartCoin","data":[[1534550400000,0.06]]}]
});
});
</script>

谁能帮我用json数据填充完整的“系列” [0] .data

...在发布问题后立即解决。我几乎整天都在挣扎。

我在json输出的开头删除了[[{“ name”：“ data1”，“ data”：[“，并在结尾处也删除了”]}]“。

然后添加了“ var json_obj = data;”并将其添加到series ...“ series：json_obj”。

最终产品：

<?php

$user = $_GET['algo'];
if(!$user) return;

echo <<<end
<div id="graph" class="live_graph" style="height: 900px;"></div>
end;
?>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$.getJSON('/site/graph_coins_mined_results?algo=<?php echo $user; ?>', function (data) {
    var json_obj = data;
    Highcharts.stockChart('graph', {
        tooltip: { enabled: true },
        chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series:json_obj

    });
});
</script>

0 个答案:

没有答案
相关问题
最新问题