将附加数据添加到 Highcharts 上的饼图工具提示中

2024-04-18

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

  • 火狐 - 10%
  • 铬 - 12%
  • 探索者 - 65%
  • 歌剧 - 13%

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

  • 火狐 - 10%其中女性用户:5%
  • 铬 - 12%其中女性用户:10%
  • 探索者 - 65%其中女性用户:30%
  • 歌剧 - 13%其中女性用户:5%

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

My JsFiddle https://jsfiddle.net/Maki_help/ac0L1ayq/ code

这是我的 Pie 的 JS 代码:

<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: enter image description here

Thanks


您可以将自定义数据串联起来,然后在工具提示中使用

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

在这里查看更新的小提琴 https://jsfiddle.net/Nishith/ac0L1ayq/5/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将附加数据添加到 Highcharts 上的饼图工具提示中 的相关文章

随机推荐