将其他数据添加到Highcharts上的Pie Tooltip中 [英] Add additional data to Pie Tooltip on Highcharts

问题描述

我正在尝试使用highcharts将其他数据添加到饼图中.尝试解释一下:我有一个浏览器饼图:

• Firefox-10％
• Chrome-12％
• 资源管理器-65％
• 歌剧-13％

我想添加更多信息以显示在工具提示中:例如:

• Firefox-10％其中女性用户:5％
• Chrome-12％其中女性用户:10％
• 资源管理器-65％其中女性用户:30％
• Opera-13％其中女性用户:5％

我提出的值是发明的，我想了解如何自定义工具提示并向该系列添加更多数据.

我的

谢谢

解决方案

您可以依次放置自定义数据，然后在工具提示中使用

 数据:[{名称:"Firefox"，y:10，自定义:"5％"}，{名称:"Chrome"，y:12自定义:"10％"}，{名称:资源管理器"，y:65，风俗:"15％"}，{名称:"Opera"，y:13自定义:"25％"}] 

在工具提示中使用

 工具提示:{pointFormat:'{series.name}:< b> {point.percentage:.1f}％</b>< br>其中哪些女性用户{point.custom}'} 

在此处查看更新的小提琴

I'm trying to add additional data to my pie chart using highcharts. Try to explain: I have a Pie Chart of Browsers:

• Firefox - 10%
• Chrome - 12%
• Explorer - 65%
• Opera - 13%

I would like to add more info to display in the tooltip: For example:

• Firefox - 10% of which woman users: 5%
• Chrome - 12% of which woman users: 10%
• Explorer - 65% of which woman users: 30%
• Opera - 13% of which woman users: 5%

The values I putted are invented, I would like to understand how to customize the tooltip and add some more data to the series.

My JsFiddle code

This is my JS code for the Pie:

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

This is an image to understand what I would like to do:

Thanks

解决方案

you can put custom data in series and then use in tooltip

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% "
        }]

Use in tooltip

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

See updated fiddle here

这篇关于将其他数据添加到Highcharts上的Pie Tooltip中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！