Question

UPDATE（2）：
我得到了它的工作，所以这里是working fiddle。请参阅下面的解决方案。如果您知道任何其他解决方案，请告诉我。谢谢！否则......随意使用这个例子：）

UPDATE（1）：
我一直在努力，这是我的updated fiddle。我想我每次循环时都会覆盖我的变量/数据值。任何帮助是极大的赞赏。

原始邮件：
我有一个jsfiddle here，显示我正在尝试做的事情。

我有一系列json格式的数据，它有多个对象
（即

[
    {"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
    {"name":"name2", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]}
]

）

并使用HighCharts线图绘制图表。相反，我想在同一个图表上将多个子任务中的系列数据定义为对象。（变量在jsfiddle链接中更好地显示）

 [
     {"subtask":"id1", "":[
        {"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
        {"name":"name2", "data":[[0,3.5],[1,2.12],[2,0.1],etc.]}
      ]
     },
     {"subtask":"id2", "":[
        {"name":"name1", "data":[[0,4.1],[1,2.23],[2,0.4],etc.]},
        {"name":"name2", "data":[[0,3],[1,2.62],[2,0.15],etc.]}
      ]
     }
 ]

我希望图形为每个子任务的每个名称/数据画一条线（即图形为id1.name1.data，id1.name2.data，id2.name1.data和id2.name2.data）

Answer 1

我的解决方案：
我得到了它的工作，所以这里是working fiddle。如果您知道任何其他解决方案，请告诉我。谢谢！否则......随意使用这个例子：）

＆＃13;

// what currently works
var jsonFormatThatWorks = [{
    "name": "name1",
    "data": [
      [0, 100],
      [10, 70.02],
      [20, 60.7],
      [30, 45.3],
      [40, 35],
      [50, 32],
      [60, 14],
      [70, 0]
    ]
  },
  {
    "name": "name2",
    "data": [
      [0, 100],
      [10, 30],
      [20, 13],
      [30, 8],
      [40, 7.5],
      [50, 5.2],
      [60, 4.54],
      [70, 0.3],
      [80, 0.01]
    ]
  }
]
// format I want/need to be able to access/graph
var jsonFormatIWant = [{
  "p1": "12345",
  "taskName": "z-echo",
  "taskData": [{
      "subTaskId": "z8-echo",
      "someTaskStatus": "Rejected",
      "someTaskData": [{
          "objectId": "name1",
          "objectData": [
            [0, 100],
            [10, 90.80],
            [20, 80.37],
            [30, 75],
            [40, 66],
            [50, 33],
            [60, 15],
            [70, 0]
          ]
        },
        {
          "objectId": "name2",
          "objectData": [
            [0, 100],
            [10, 23],
            [20, 15],
            [30, 11],
            [40, 8.5],
            [50, 6.2],
            [60, 3.44],
            [70, 0.7],
            [80, 0.5]
          ]
        }
      ]
    },
    {
      "subTaskId": "z9-echo",
      "someTaskStatus": "Accepted",
      "someTaskData": [{
          "objectId": "name1",
          "objectData": [
            [0, 100],
            [10, 70.02],
            [20, 60.7],
            [30, 45.3],
            [40, 35],
            [50, 32],
            [60, 14],
            [70, 0]
          ]
        },
        {
          "objectId": "name2",
          "objectData": [
            [0, 100],
            [10, 30],
            [20, 13],
            [30, 8],
            [40, 7.5],
            [50, 5.2],
            [60, 4.54],
            [70, 0.3],
            [80, 0.01]
          ]
        }
      ]
    }
  ]
}]
// my chart
$(document).ready(function() {
  var options = {

    chart: {
      renderTo: 'container',
      type: 'line',
      zoomType: 'xy',
      panning: true,
      panKey: 'shift'
    },
    xAxis: {
      title: {
        text: 'Some X Label'
      },
      crosshair: true
    },
    plotOptions: {
      series: {
        marker: {
          radius: 1
        },
        allowPointSelect: true
      }
    },
    yAxis: {
      labels: {
        format: '{value} %'
      },
      floor: 0,
      ceiling: 100,
      title: {
        text: 'Value (%)'
      },
      crosshair: true,
      gridLineDashStyle: 'ShortDash',
      gridLineColor: '#aaaaaa'
    },
    title: {
      text: 'Sample Chart'
    },
    subtitle: {
      text: 'Click and drag to zoom in. Hold down shift key to pan.'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: seriesOptions
  };

  var chart = new Highcharts.Chart(options);
});
var seriesOptions = [],
  seriesCounter = 0
var data = jsonFormatIWant[0]
var taskData = data.taskData
taskData.forEach(function(element, i) {
  element.someTaskData.forEach(function(childElement, j) {
    seriesOptions[seriesCounter] = {
      //task: element.subTaskId,
      name: element.subTaskId + "_" + element.someTaskData[j].objectId,
      data: element.someTaskData[j].objectData
    }
    seriesCounter += 1
    //console.log(seriesCounter)
    childElement.objectData.forEach(function(grandChildElement, h) {})
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

<!-- I'd like to be able to graph each objects data for each subTask 
(i.e., z8-echo and z9-echo from the data jsonFormatIWant variable beneath the chart definition) 
something like: taskData[0].someTaskData and taskData[1].someTaskData -->

＆＃13;

如何从我的json数据中分配多个系列？ Highcharts

1 个答案: