Highcharts饼图dataLabel选项不适用于对象初始化

时间:2015-12-25 12:39:50

标签: pie-chart

这是一个jsfiddle示例,在创建图表对象时通过传递选项初始化图表时,无法获取要显示的数据标签值或百分比。标签中仅显示point.name。似乎只有在运行时使用plotOptions结构创建整个对象时,才能使这些选项生效。

http://jsfiddle.net/nstvx7wc/7/

$(document).ready(function(){
var options = {

    chart: {
        renderTo: 'chartdiv',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },

   pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
        enabled: true,
        format: '{point.name} {point.percentage:.1f} %',
        style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
               }
        },
    },
    title: {
           text: ''
           },
};
options.series = [{"colorByPoint": "true", "data": [{"y": 0.36, "name": "series1"}, {"y": 0, "name": "series2"}, {"y": 0, "name": "series3"}, {"y": 0.03, "name": "series4"}, {"y": 0.04, "name": "series5"}, {"y": 0.07, "name": "series6"}]}];
options.title.text = "test pie"; 
options.pie.dataLabels.enabled = 'true';
chartObject = new Highcharts.Chart(options);
});

1 个答案:

答案 0 :(得分:0)

你'''选项配置错误。 options.pie不存在。它应该放在系列或plotoptions属性下;

见这个例子; http://jsfiddle.net/nstvx7wc/21/

$(document).ready(function() {
  var options = {

    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'test pie'
    }
  };

  options.series = [{
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      format: '{point.name} {point.percentage:.1f} %',
      style: {
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
      }
    },
    "colorByPoint": "true",
    "data": [{
      "y": 0.36,
      "name": "series1"
    }, {
      "y": 0,
      "name": "series2"
    }, {
      "y": 0,
      "name": "series3"
    }, {
      "y": 0.03,
      "name": "series4"
    }, {
      "y": 0.04,
      "name": "series5"
    }, {
      "y": 0.07,
      "name": "series6"
    }]
  }];


  Highcharts.chart('chartdiv', options);
});