draw pie chart from arrays in highcharts

2019-09-11 06:16发布

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条回答
劳资没心,怎么记你
2楼-- · 2019-09-11 06:57

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/

查看更多
登录 后发表回答