从 JSON 在单个高图表图中绘制多个序列

Plotting multiple series in single Highcharts plot from JSON

本文关键字：绘制 JSON 单个高      更新时间：2023-09-26

所以我有一个JSON对象，我正在尝试使用Highcharts绘制它。JSON 对象类似于以下内容：

json_data = [
    {
        'name': "col1",
        'data': [1, 2, 3, 4, 5]},
    {
        'name': "col2",
        'data': [2, 4, 6, 8, 10]},
    {
        'name': "col3",
        'data': [2, 3, 4, 5, 6]},
    {
        'name': "col4",
        'data': [-1, -2, -3, -4, -5]},
]

我可以使用以下代码通过Highcharts绘制它：

$('#container').highcharts({
        chart: {
            type: 'line',
        },
        legend: {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0,
        },
        title: {
                text: 'Data',
                x: -20 // center title
        },
        xAxis: {
              title: {text: 'Velocity (m/sec)'},            
        },
        yAxis: {title: {text: 'Force (N)'}},
        series: json_data,
    });

这在我的json_data中绘制了所有 4 列，但我试图做的是在同一图表上绘制col2 col1和col4针对col3，因此图表中只有 2 个线图。换句话说，x 轴将由 col1 和 col3 定义，两条线图将具有不同的间隔（x 刻度）。我知道我可以在 series: 参数中定义不同的series，但我正在努力理解如何从我的 JSON 对象中选择这些。

本质上，我需要将我的 JSON 从其原始格式重新排列为两个系列的数据，如下所示：

// col2 against col1
series1 = [ [1, 2],
            [2, 4],
            [3, 6],
            [4, 8],
            [5, 10]
]
// col4 against col3
series2 = [ [2, -1],
            [3, -2],
            [4, -3],
            [5, -4],
            [6, -5]
]

关于我如何实现这一目标的任何帮助将不胜感激。

对于任何后代，这是我提出的解决方案，它假设每个数据数组的长度相同（我的用例）：

    var arr = [json_data];
    // first series data to plot
    var series1 = [];
    for (var i = 0; i < arr[0][0].data.length; i++)
    {
        var temp = [];
        temp.push(arr[0][0].data[i]);
        temp.push(arr[0][1].data[i]);                   
        series1.push(temp);
    }
    // second series data to plot
    var series2 = [];
    for (var i = 0; i < arr[0][0].data.length; i++)
    {
        var temp = [];
        temp.push(arr[0][2].data[i]);
        temp.push(arr[0][3].data[i]);                   
        series2.push(temp);
    }

在我的highcharts series:参数中：

     series: [{
            name: "Series 1",
            data: series1
     }, {
            name: "Series 2",
            data: series2
     }],
相关文章：