Highcharts饼图不接受价值观

时间:2015-09-23 12:55:50

标签: javascript json highcharts format

我使用JavaScript将饼图的y值格式化为两位小数,但它们没有显示在图表上。

我需要取每个百分比然后返回它们。 fiddle

如果小提琴不起作用,这就是我的代码。

$(function () {
      var dataPie =[];
    var abc =[{"val":"19981","name":"TOTAL"},{"val":"2051","name":"\"NATURAL GAS\""},{"val":"274","name":"\"OTHER FOSSIL FUELS\""},{"val":"8826","name":"\"DUAL FUEL\""},{"val":"5351","name":"\"NUCLEAR\""},{"val":"2628","name":"\"HYDRO\""},{"val":"501","name":"\"WIND\""},{"val":"350","name":"\"OTHER RENEWABLES\""},{"val":" ","name":"\"UNKNOWN\" "}];
 $.each(abc,function(i,el)
{
     var total = null;
     if(el.name == "TOTAL"){
            total = parseInt(el.val);
        }else{
            var p = parseInt(el.val) / total * 100;
            dataPie.push({name :el.name,y: p});
        }

});
    $('#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:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Brands",
            colorByPoint: true,
            data: dataPie
        }]
    });
});

1 个答案:

答案 0 :(得分:1)

highcharts能够做到这一点,你需要简单地使用

{{1}}

查看小提琴,其中您的上一个问题的数据已更新here