highcharts使用之使用数组数据绑定数据

highcharts的官方API的例子(例子地址：https://code.hcharts.cn/highcharts/d5J8om)中，数组的使用：

data: {
rows: [
[null, '小明', '小红','sdsa'],  // 第一行为数据列的名字
['苹果', 1, 5,1], 		  // 分类及数值
['梨', 4, 4,5], 		   // 分类及数值
['橙子', 3, 2,6] 		  // 分类及数值
]
}

首先，需要定义一个数据数组。

var dataArray = new Array();

dataArray[0] = [null, '苹果', '橘子', '梨', '西瓜'];

其中，数组中又是一个数组，其中dataArray数组中的第一个元素时数据列的名字，即：legend(图例)的名字

然后用这个dataArray代替rows的值即可，如：data: { rows: dataArray}

完整的代码：

$.getJSON('/Report/Sel?', function (data) {
var recharge_count = 0, active_count = 0, recharge_rate = 0;
//var str = '<tbody>';
var dataArray = new Array();
dataArray[0] = [null, '苹果', '橘子', '梨', '西瓜'];
$.each(data, function (infoIndex, info) {
if (info["active_count"] != "")
active_count = parseFloat(info["active_count"]);
else
active_count = 0;
if (info["recharge_count"] != "")
recharge_count = parseFloat(info["recharge_count"]);
else
recharge_count = 0;
if (info["recharge_rate"] != "")
recharge_rate = parseFloat(info["recharge_rate"]);
else
recharge_rate = 0;
dataArray[infoIndex + 1] = ['', active_count, recharge_count, recharge_rate, info["goal"]];

})

//用数据生成图形数据
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
backgroundColor: '#34445e'
},
title: {
text: '水果价格',
style: { color: '#fff', fontSize: "25px", fontWeight: "bold", }
},
xAxis: {
crosshair: true,
lineColor: '',
labels: { style: { color: '#a9b5c2', fontSize: '20px' } }
},
tooltip: { shared: true },
yAxis: [
//右Y轴
{
min: 0, max: 100, alignTicks: false, gridLineWidth: 0,
title: { text: null,/*style: {color: Highcharts.getOptions().colors[0]}*/ },
labels: { format: null, style: { color: '#a9b5c2' }, format: '{value} %', },
opposite: true
},
//左Y轴
{
min: 0,
labels: { format: null, style: { color: '#a9b5c2' } },
title: { text: null,/*style: {color: Highcharts.getOptions().colors[1]}*/ }
}],

plotOptions: {
column: { dataLabels: { enabled: true, style: { color: '#D7DEE9' }, y: 20 } },
line: {
dataLabels: {
enabled: true, style: { color: '#D7DEE9' },
// 折线数据显示%
formatter: function () {
return this.point.y + '%';
}
},
tooltip: { valueSuffix: '%' },
//点形状
marker: { radius: 5, symbol: 'circle' },
}
},
colors: ['#2ea7e1', '#f5e766', '#ed1c24'],
data: {
rows: dataArray
},
});