HighCharts 饼图 - 在每个切片内添加文本 [英] HighCharts Pie Chart - Add text inside each slice

查看:30
本文介绍了HighCharts 饼图 - 在每个切片内添加文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用代表资产配置的 HighCharts 创建一个财务饼图.我的目标是创建一个图表,表示每个切片中的实际分配值,但在每张幻灯片内部将基本上显示第二个数据标签,显示各种投资工具的目标百分比.需要注意的是,当前的资产配置可能并不总是与目标配置值相匹配.

I am creating a financial pie chart using HighCharts that represents asset allocation. My goal is to create a chart that represents the actual allocation values in each slice but inside each slide will show essentially a second data label that displays the target percentage for various investment vehicles. It is important to note that the current asset allocation may not always match up with the targeted allocation value.

除了每张幻灯片中的目标标签外,我已经完成了所有工作.请参阅下图了解我想要完成的任务:

I have gotten everything working except for the Target labels inside each slide. See the image below for what I would like to accomplish:

这是我目前所拥有的:

            var asset_allocation_pie_chart = new Highcharts.Chart({
            chart: { renderTo: 'asset_allocation_bottom_left_div' },
            title: { text: 'Current Asset Allocation', style: { fontSize: '17px', color: entity_color, fontWeight: 'bold', fontFamily: 'Verdana'} },
            subtitle: { text: '(As of ' + effective_date_formatted + ')', style: { fontSize: '15px', color: entity_color, fontFamily: 'Verdana', marginBottom: '10px' }, y: 40 },
            tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 0 },
            plotOptions: {
                pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorWidth: 1, connectorColor: '#000000', formatter: function() { return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %'; } } }
            },
            series: [{
                type: 'pie',
                name: 'Asset Allocation',
                data: [['Investment Grade Bonds', InvestmentGradeBondPercentage], ['High Yield Bonds', HighYieldBondPercentage], ['Hedged Equity', HedgedEquityPercentage], ['Global Equity', GlobalEquityPercentage], ['Cash', CashPercentage]]
            }],
            exporting: { enabled: false },
            credits: { enabled: false }
       });

推荐答案

这里是 jsfiddle这个和代码显示内部和外部的数据标签.

Here is the jsfiddle for this and code to show datalabels inside and outside.

实现这一目标

  1. 你需要给出两个饼图系列.一个会看前面,另一个会在后面.
  2. 如果您想模拟它,请更改为 size: '80%'.
  3. 距离:距离的使用是显示数据标签进出,您可以根据自己想要的位置进行更改.
  4. allowPointSelect:默认值为 false,但如果使用它,则在单击前面饼图的切片时将显示位于后面的饼图.

代码:

 var asset_allocation_pie_chart = new Highcharts.Chart({
        chart: {
            renderTo: 'asset_allocation_bottom_left_div'
        },
        title: {
            text: 'Current Asset Allocation',
            style: {
                fontSize: '17px',
                color: 'red',
                fontWeight: 'bold',
                fontFamily: 'Verdana'
            }
        },
        subtitle: {
            text: '(As of ' + 'dfdf' + ')',
            style: {
                fontSize: '15px',
                color: 'red',
                fontFamily: 'Verdana',
                marginBottom: '10px'
            },
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 0
        },
        plotOptions: {
            pie: {
                size: '80%',
                cursor: 'pointer',
                data: [
                    ['Investment Grade Bonds', 100],
                    ['High Yield Bonds', 200],
                    ['Hedged Equity', 300],
                    ['Global Equity', 400],
                    ['Cash', 500]
                ]
            }
        },
        series: [{
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    verticalAlign: 'top',
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: -30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return Math.round(this.percentage) + ' %';
                    }
                }
            }, {
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: 30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
                    }
                }
            }],
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        }
    });

饼图如下所示:

这篇关于HighCharts 饼图 - 在每个切片内添加文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆