在高图中从数组中绘制饼图 [英] draw pie chart from arrays in highcharts

问题描述

我想合并两个数组并将它们显示在图表上，但不能这样做。请显示绘制该类型图表的正确语法。如果有人可以提供一个jsfiddle链接，那对我的理解会更好。

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

推荐答案

您不必合并数组。你必须用对象列表构建新的数组。这些对象应该具有基于您提供的数组的结构。每个对象的属性名称应该从名称数组中获得它的值。礼物'y'反过来应该从数据数组中获得价值。例如：

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

这是小提琴： http://jsfiddle.net/ujahc83h/2/

这篇关于在高图中从数组中绘制饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！