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 = '';
            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
                },
            });