draw pie chart from arrays in highcharts

问题

I want to merge two arrays and display them on chart but can't do it. Please show the correct syntax of drawing that type of chart. If someobdy could provide a jsfiddle link it would be better for my understanding. Thanks.

$(function () {
    var name = ['chrome','firefox','opera'];
    var data = [11.22,81.54,6];
    var final = [name,data];

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Results",
            colorByPoint: true,
            data:JSON.parse(final)
        }]
    });
});

回答1:

You don`t have to merge arrays. You have to build new array with list of objects. Those objects should have structure based on arrays that you provided. Propriety "name", of each object, should get its value form the "name" array. Propriety 'y', in its turn should get value from the "data" array. Something like:

var final = [
   {
       name: 'chrome',
       y: '11,22'
   },
   {
       name: 'firefox',
       y: '81.5'
   },
   {
       name: 'opera',
       y: '6'
   }   
]

That is how you can get it:

var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [];

for(var i=0; i < name.length; i++) {
    final.push({
        name: name[i],
        y: data[i]           
    });        
}

Here is the fiddle: http://jsfiddle.net/ujahc83h/2/

来源：https://stackoverflow.com/questions/32411167/draw-pie-chart-from-arrays-in-highcharts

标签

javascript

Highcharts