logo标签列表

在Highcharts中为饼图工具提示添加附加数据

javascripthighcharts
6
我正在尝试使用highcharts向我的饼图添加附加数据。 以下是解释：
我有一个浏览器饼图：
  • 火狐浏览器 - 10％
  • 谷歌浏览器 - 12％
  • IE浏览器 - 65％
  • Opera浏览器 - 13％
我想添加更多信息以在工具提示中显示： 例如：
  • 火狐浏览器 - 10％ 其中女性用户占5％
  • 谷歌浏览器 - 12％ 其中女性用户占10％
  • IE浏览器 - 65％ 其中女性用户占30％
  • Opera浏览器 - 13％ 其中女性用户占5％
我放置的值是虚构的，我想了解如何自定义工具提示并向系列添加更多数据。
这是我的JS代码：

JsFiddle

<script>
    $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type:'pie'
            },

            title: {
                text: 'Browsers'
            },

            subtitle: {
                text:false,
            },

            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: "Total",
                colorByPoint: true,
                data: [{
                    name: "Firefox",
                    y: 10,
                }, {
                    name: "Chrome",
                    y: 12,
                }, {
                    name: "Explorer",
                    y: 65,
                }, {
                    name: "Opera",
                    y: 13,
                }]
            }],

        });
    });
</script>

这是一张图片，用于理解我想做的事情： enter image description here 谢谢。
更新 pointFormat: '{series.name}: <b>{point.percentage:.1f}% 其中女性用户：{value}</b>' - Venugopal
3个回答
9
您可以在系列中放置自定义数据，然后在工具提示中使用。
data: [{
            name: "Firefox",
            y: 10,
    custom:"5% "
        }, {
            name: "Chrome",
            y: 12,
     custom:"10% "
        }, {
            name: "Explorer",
            y: 65,
     custom:"15%"
        }, {
            name: "Opera",
            y: 13,
     custom:"25% "
        }]

在工具提示中使用

  tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> <br>of which woman users {point.custom}'
    }

点击此处查看更新的代码示例

1
0
可以尝试这样做：
提示框：{ headerFormat: '{series.name}: {point.y}', }
      pointFormat: '{series.name}: <b><br/>Totalamount: {point.amount}'

    },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接