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

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

highcharts

如何在highcharts的piechart中添加y值作为图例,highcharts,Highcharts,我有一个用highcharts插件制作的Piechart，它工作正常，我的图例也工作正常。但是这里的'y'值是12,10,33，没有显示在我的图例中。我需要用%来显示这个值，例如：黄色片-12%，红色片-10%，等等，下面是我的代码。提前谢谢 HTML Javascript $（文档）.ready（函数（）{ }); $（函数（）{ 新海图，海图({ 图表：{ renderTo:'容器'，键入“pie”，身高：450，宽度：450 }, 学分：{ 已启用：false }, 标题：{ 文

我有一个用highcharts插件制作的Piechart，它工作正常，我的图例也工作正常。但是这里的'y'值是12,10,33，没有显示在我的图例中。我需要用%来显示这个值，例如：黄色片-12%，红色片-10%，等等，下面是我的代码。提前谢谢

HTML

Javascript

$（文档）.ready（函数（）{
});
$（函数（）{
新海图，海图({
图表：{
renderTo:'容器'，
键入“pie”，
身高：450，
宽度：450
},
学分：{
已启用：false
},
标题：{
文本：“”，
},
打印选项：{
馅饼：{
影子：错，
边框宽度：0
}
},
工具提示：{
已启用：false
},
图例：{
对齐：“右”，
布局：“垂直”，
垂直排列：“顶部”，
x:0,，
y:0
},
系列：[{
内部尺寸：“60%”，
外部化：“40%”，
showInLegend：是的，
数据：[
{名称：'黄色切片'，y:12，颜色：'黄色'}，
{名称：'红色切片'，y:10，颜色：'红色'}，
{名称：'蓝色切片'，y:33，颜色：'蓝色'}，
{名称：'绿色切片'，y:20，颜色：'绿色'}
],
数据标签：{
启用：false，
}
}]
});
});

您需要

数据标签.formatter

。您还可以更改一系列设置来调整放置和连接器

检查一下这个文件

<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>

$(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,

            }
        }]
    });
});

$(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 + '%';
        }

      }
    }]
  });
});