如何在highcharts中的饼图中添加y值作为图例

时间:2018-04-13 18:33:03

标签: highcharts

我有一个由highcharts插件组成的Piechart,它的工作正常,我的传奇也很好。但是这里'y'的值是12,10,33并没有显示我的传说。我需要显示这个%的值为ex:黄色切片-12%,红色切片-10%等,下面是我的代码。提前谢谢。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>

的Javascript

$(document).ready(function(){

});
</script>
</head>
<body>
<div id="container" style="height: 400px; width: 500"></div>
<script>
$(function () {
    new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie',
            height: 450,
            width: 450
        },
        credits: {
            enabled: false
        },
        title: {
            text : '',
        },
        plotOptions: {
            pie: {
                shadow: false,
                borderWidth: 0
            }
        },
        tooltip: {
            enabled: false
        },
 legend: {
    align: 'right',
    layout: 'vertical',
    verticalAlign: 'top',
    x: 0,
    y: 0
},
        series: [{
            innerSize: '60%',   
            outerSize: '40%',   
            showInLegend: true,
            data: [
                {name: 'Yellow Slice', y: 12, color: 'yellow'},
                {name: 'Red Slice', y: 10, color: 'red' },
                {name: 'Blue Slice', y: 33, color: 'blue'},
                {name: 'Green Slice', y: 20, color: 'green'}
            ],
            dataLabels: {
                enabled: false,

            }
        }]
    });
});

1 个答案:

答案 0 :(得分:0)

你想要dataLabels.formatterhttps://api.highcharts.com/highcharts/series.pie.dataLabels 您还可以更改一系列设置来调整位置和连接器。

https://jsfiddle.net/jsormpjj/

$(function() {
  new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie',
      height: 450,
      width: 450
    },
    credits: {
      enabled: false
    },
    title: {
      text: '',
    },
    plotOptions: {
      pie: {
        shadow: false,
        borderWidth: 0
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      align: 'right',
      layout: 'vertical',
      verticalAlign: 'top',
      x: 0,
      y: 0
    },
    series: [{
      innerSize: '60%',
      outerSize: '40%',
      showInLegend: true,
      data: [{
          name: 'Yellow Slice',
          y: 12,
          color: 'yellow'
        },
        {
          name: 'Red Slice',
          y: 10,
          color: 'red'
        },
        {
          name: 'Blue Slice',
          y: 33,
          color: 'blue'
        },
        {
          name: 'Green Slice',
          y: 20,
          color: 'green'
        }
      ],
      dataLabels: {
        enabled: true,
        formatter: function() {
          return this.point.name + ' - ' + this.point.y + '%';
        }

      }
    }]
  });
});