高级图表中的JSON解析

Question

我在这里创建了这个处理静态数据的片段：

​

Highcharts.chart("container", {
  title: {
    text: "Highcharts pie chart"
  },

  xAxis: {
    categories: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },

  series: [
    {
      type: "pie",
      allowPointSelect: true,
      keys: ["name", "y", "selected", "sliced"],
      data: [
        ["January", 105],
        ["February", 400],
        ["March",230]
      ],
      showInLegend: true
    }
  ]
});

@import "https://code.highcharts.com/5/css/highcharts.css";
.highcharts-series .highcharts-point-select {
  fill: #fff;
  stroke: #f00;
  stroke-dasharray: 10;
}

<script src="https://code.highcharts.com/5/js/highcharts.js"></script>
<div id="container"></div>

​

现在，我正在尝试解析来自JSON查询的数据。JSON的格式如下：

{"headers":["Month","Clicks"],"rows":[["January",105],["February",400],["March",230]]}

因此，目前工作的片段中的JSON格式是：

["January", 105],
["February", 400],
["March",230]

我尝试使用在示例中使用的解决方案。在这种情况下，我不能正确地解析数据。在下面的新片段中，我在JS框的开头添加了一个JS脚本来解析JSON数据。

​

var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]};

var data2 = [];

for (var i = 0; i < unformatted.rows.length; i++) {
    var row = unformatted.rows[i];
    
    data2.push({
        Month: row[0],
        Clicks: row[1]
    });
}

Highcharts.chart("container", {
  title: {
    text: "Clicks per Month"
  },

  xAxis: {
    categories: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },

  series: [
    {
      type: "pie",
      allowPointSelect: true,
      keys: ["name", "y", "selected", "sliced"],
      data: data2
      ,
      showInLegend: true
    }
  ]
});

@import "https://code.highcharts.com/5/css/highcharts.css";
.highcharts-series .highcharts-point-select {
  fill: #fff;
  stroke: #f00;
  stroke-dasharray: 10;
}

<script src="https://code.highcharts.com/5/js/highcharts.js"></script>
<div id="container"></div>

​

Answer 1

您需要访问第一行，然后从数组中的每个项获取数据。

categories: unformatted.rows[0].map(record => record[0])

数据只是行。

data: unformatted.rows

​

// Return unique array of items.
const unique = list => [...new Set(list)];

var unformatted = {
  "headers": ["Month", "impressions"],
  "rows": [
    ["January", 124010],
    ["February", 545010]
  ]
};

Highcharts.chart("container", {
  title: {
    text: "Clicks per Month"
  },
  xAxis: {
    categories: unique(unformatted.rows[0].map(record => record[0]))
  },
  series: [{
    type: "pie",
    allowPointSelect: true,
    keys: ["name", "y", "selected", "sliced"],
    data: unformatted.rows,
    showInLegend: true
  }]
});

@import "https://code.highcharts.com/5/css/highcharts.css";
.highcharts-series .highcharts-point-select {
  fill: #fff;
  stroke: #f00;
  stroke-dasharray: 10;
}

<script src="https://code.highcharts.com/5/js/highcharts.js"></script>
<div id="container"></div>

​

Answer 2

如果"rows"包含您的数据，为什么不让您的series.data成为"rows"元素，而不是循环使用JSON。所以你会有这个：

var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]};

var data2 = [];
//console.log(unformatted.rows);
data2 = unformatted.rows;

Answer 3

您的错误是使用 part 2.推送部件

// instead
data2.push({
    Month: row[0],
    Clicks: row[1]
});

//you should do 
data2.push([row[0], row[1]]);

以下是的固定版本--您的代码

​

var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]};

var data2 = [];

for (var i = 0; i < unformatted.rows.length; i++) {
    var row = unformatted.rows[i];
    
    data2.push([row[0], row[1]]);

}

Highcharts.chart("container", {
  title: {
    text: "Clicks per Month"
  },

  xAxis: {
    categories: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },

  series: [
    {
      type: "pie",
      allowPointSelect: true,
      keys: ["name", "y", "selected", "sliced"],
      data: data2,
      showInLegend: true
    }
  ]
});

@import "https://code.highcharts.com/5/css/highcharts.css";
.highcharts-series .highcharts-point-select {
  fill: #fff;
  stroke: #f00;
  stroke-dasharray: 10;
}

<script src="https://code.highcharts.com/5/js/highcharts.js"></script>
<div id="container"></div>

​