时间戳

首页 > 解决方案 > 解析 Json 以使用 Javascript 呈现多行 highstock 图表

javascript - 解析 Json 以使用 Javascript 呈现多行 highstock 图表

问题描述

我正在尝试解析来自 R Dataframe 的类似 JSON 输出以呈现为多行 highstock 图表。我是 javascripting 和 highcharts 的新手，所以在阅读了 highstocks 的文档后，我仍然无法按照我的意愿呈现图表。

我有来自 R 数据框的输出格式的 JSON 文件，（示例） -

[[
 {
   "Server": "AAAA",
   "Date": "9/1/2017",
   "Hits": 455
 },
 {
   "Server": "AAAA",
   "Date": "9/2/2017",
   "Hits": 457
 },
 {
   "Server": "AAAA",
   "Date": "9/3/2017",
   "Hits": 658
 },
 {
   "Server": "AAAA",
   "Date": "9/4/2017",
   "Hits": 645
 },
 {
   "Server": "AAAA",
   "Date": "9/5/2017",
   "Hits": 578
 },
 {
   "Server": "AAAA",
   "Date": "9/6/2017",
   "Hits": 425
 },
 {
   "Server": "AAAA",
   "Date": "9/7/2017",
   "Hits": 487
 },
 {
   "Server": "AAAA",
   "Date": "9/8/2017",
   "Hits": 499
 },
 {
   "Server": "AAAA",
   "Date": "9/9/2017",
   "Hits": 600
 },
 {
   "Server": "AAAA",
   "Date": "9/10/2017",
   "Hits": 567
 },
 {
   "Server": "BBBB",
   "Date": "9/1/2017",
   "Hits": 486
 },
 {
   "Server": "BBBB",
   "Date": "9/2/2017",
   "Hits": 595
 },
 {
   "Server": "BBBB",
   "Date": "9/3/2017",
   "Hits": 509
 },
 {
   "Server": "BBBB",
   "Date": "9/4/2017",
   "Hits": 460
 },
 {
   "Server": "BBBB",
   "Date": "9/5/2017",
   "Hits": 351
 },
 {
   "Server": "BBBB",
   "Date": "9/6/2017",
   "Hits": 488
 },
 {
   "Server": "BBBB",
   "Date": "9/7/2017",
   "Hits": 693
 },
 {
   "Server": "BBBB",
   "Date": "9/8/2017",
   "Hits": 478
 },
 {
   "Server": "BBBB",
   "Date": "9/9/2017",
   "Hits": 662
 },
 {
   "Server": "BBBB",
   "Date": "9/10/2017",
   "Hits": 401
 },
 {
   "Server": "CCCC",
   "Date": "9/1/2017",
   "Hits": 477
 },
 {
   "Server": "CCCC",
   "Date": "9/2/2017",
   "Hits": 474
 },
 {
   "Server": "CCCC",
   "Date": "9/3/2017",
   "Hits": 396
 },
 {
   "Server": "CCCC",
   "Date": "9/4/2017",
   "Hits": 372
 },
 {
   "Server": "CCCC",
   "Date": "9/5/2017",
   "Hits": 398
 },
 {
   "Server": "CCCC",
   "Date": "9/6/2017",
   "Hits": 605
 },
 {
   "Server": "CCCC",
   "Date": "9/7/2017",
   "Hits": 415
 },
 {
   "Server": "CCCC",
   "Date": "9/8/2017",
   "Hits": 522
 },
 {
   "Server": "CCCC",
   "Date": "9/9/2017",
   "Hits": 385
 },
 {
   "Server": "CCCC",
   "Date": "9/10/2017",
   "Hits": 378
 }
]]

我尝试的 Javascript 代码如下所示。尝试按服务器对 json 进行分组，使其具有 highstock 图表所需的形式。[[“名称”：“AAAA”，“数据”：[[9/1/2017,455]，[9/2/2017,457]...]，“名称”：“BBBB，“数据”： [[9/1/2017,486],...]...]]

var result = [];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent',
                showInNavigator: true
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2,
            split: true
        },

        series: result
    });
}

$.getJSON('data.json',    function (data) {
        result = data.reduce(function (r, a) {
        r[a.Server] = r[a.Server] || [];
        r[a.Server].push(a);
        return r;
    }, Object.create(null));
        };

            createChart();

    });
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


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

通过使用 console.log() json 正在分组，但图表似乎仍然没有生成。花了三天多的时间阅读 SO .. 尝试了各种技巧，但似乎仍然无法弄清楚。任何人都能够指出我如何阅读 json 的正确方向，解析它以便 highstocks 渲染会很棒！使用https://www.highcharts.com/stock/demo/compare上的模板生成与此类似的图。数据集是动态过滤的，因此无法将名称字段预填充为在 highcharts 中找到的演示代码。日期也生成为 UNIX 时间。

标签： javascriptrjsonhighcharts

解决方案

我创建了一个简单的示例，如何根据您的 JSON 数据创建具有多个系列的 Highstock 图表：

function createChart(series) {
    Highcharts.stockChart('container', {
        series: series
    });
}

$.getJSON('https://api.myjson.com/bins/1d5580', function(data) {
    var series = [],
        name,
        newData = [];

    Highcharts.each(data[0], function(el, i) {
        if (!name) {
            name = el.Server;
        }
        if (name === el.Server) {
            newData.push({
                x: Number(moment(el.Date).format('X')),
                y: el.Hits
            });
        } else {
            series.push({
                name: name,
                data: newData
            });
            name = el.Sever;
            newData = [];
            newData.push({
                x: Number(moment(el.Date).format('X')),
                y: el.Hits
            });
        }
    });
    series.push({
        name: name,
        data: newData
    });
    createChart(series);
});

现场演示：http: //jsfiddle.net/BlackLabel/qrxszc0b/

文档：https ://www.highcharts.com/docs/working-with-data/data-intro

推荐阅读