Highcharts 中的 JSON 解析答案

【问题标题】：JSON parsing in HighchartsHighcharts 中的 JSON 解析
【发布时间】：2017-04-28 12:52:36
【问题描述】：

我在这里创建了这个适用于静态数据的 sn-p：

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]]}

所以，目前在 sn-p 中有效的 JSON 格式是：

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

我尝试使用有效示例中使用的解决方案。在这种情况下，我无法正确解析数据。在下面新建的sn-p中，我在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>

【问题讨论】：

标签： javascript html css json highcharts

【解决方案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>

【讨论】：

【解决方案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;

【讨论】：

【解决方案3】：

你的错误在于 data2.push 部分

// 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>

【讨论】：