Question

我在这里https://jsfiddle.net/osnnneaj/2/创建了一个钻取高级图的小提琴。我需要在主图表和钻取图表中以正确的百分比格式化工具提示。有人可以告诉我该怎么做。

所以我需要工具提示显示总数的5％。

$(function () {
    $('#drillDown').highcharts({
        chart: {
            type: 'column',
            renderTo: 'drillDown'
        },
        title: {
            text: 'Healthcare Operations'
        },
        subtitle: {
            text: 'Facility Revenue'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: ${point.y}'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat:                 
            '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'

        },
        series: [{
            name: 'Facility',
            colorByPoint: true,
            data: [{
                name: 'Tanner Hospital System',
                y: 1000000,
                drilldown: 'Tanner Hospital System'
            }, {
                name: 'Wellstar Health',
                y: 2500000,
                drilldown: 'Wellstar Health'
            }, {
                name: 'Jacobs Medical Park',
                y: 370000,
                drilldown: 'Jacobs Medical Park'
            }, {
                name: 'Blue Star',
                y: 4200000,
                drilldown: 'Blue Star'
            }, {
                name: 'Cigna',
                y: 2700000,
                drilldown: 'Cigna'
            }, {
                name: 'Blue Cross',
                y: 3900000,
                drilldown: 'Blue Cross'
            }]
        }],
        drilldown: {
            series: [{
                name: 'Tanner Hospital System',
                id: 'Tanner Hospital System',
                data: [
                    {
                        name: 'Intensive Care',
                        y: 500000,
                        drilldown: 'Tanner Intensive Care Sub'
                    },
                    ['Orthopaedics', 300000],
                    ['Pediatrics', 200000],
                    ['Internal Medicine', 100000],
                    ['Cancer Unit', 100000]
                ]
            }, {
                name: 'Wellstar Health',
                id: 'Wellstar Health',
                data: [
                    ['Intensive Care', 100000],
                    ['Orthopaedics', 100000],
                    ['Pediatrics', 50000],
                    ['Internal Medicine', 25000],
                    ['Cancer Unit', 25000]
                ]
            }, {
                name: 'Jacobs Medical Park',
                id: 'Jacobs Medical Park',
                data: [
                    ['Intensive Care', 20000],
                    ['Orthopaedics', 10000],
                    ['Pediatrics', 4000],
                    ['Internal Medicine', 1500],
                    ['Cancer Unit', 1500]
                ]
            }, {
                name: 'Blue Star',
                id: 'Blue Star',
                data: [
                     {
                         name: 'Intensive Care',
                         y: 500000,
                         drilldown: 'Blue Star Intensive Care Sub'
                     },
                       {
                           name: 'Orthopaedics',
                           y: 10000000,
                           drilldown: 'Blue Star Orthopaedics'
                       },
                    ['Pediatrics', 1000000],
                    ['Internal Medicine', 500000],
                    ['Cancer Unit', 500000]
                ]
            }, {
                name: 'Cigna',
                id: 'Cigna',
                data: [
                    ['Intensive Care', 3000000],
                    ['Orthopaedics', 8000000],
                    ['Pediatrics', 1000000],
                    ['Internal Medicine', 500000],
                    ['Cancer Unit', 500000]
                ]
            },
            {
                name: 'Blue Cross',
                id: 'Blue Cross',
                data: [
                    ['Intensive Care', 3000000],
                    ['Orthopaedics', 8000000],
                    ['Pediatrics', 1000000],
                    ['Internal Medicine', 500000],
                    ['Cancer Unit', 500000]
                ]
            },

            {
                id: 'Tanner Intensive Care Sub',
                data: [
                  ['First Ward', 3000000],
                  ['ICU 2', 8000000],
                  ['ICU 3', 1000000],
                  ['ICU 4', 500000],
                  ['ICU 5', 500000]
                ]
            },
              {
                  id: 'Blue Star Intensive Care Sub',
                  data: [
                    ['First Ward', 3000000],
                    ['ICU 2', 8000000],
                    ['ICU 3', 1000000],
                    ['ICU 4', 500000],
                    ['ICU 5', 500000]
                  ]
              },
               {
                   id: 'Blue Star Orthopaedics',
                   data: [
                     ['First Ward', 3000000],
                     ['ICU 2', 8000000],
                     ['ICU 3', 1000000],
                     ['ICU 4', 500000],
                     ['ICU 5', 500000]
                   ]
               }
            ]
        }

    });
});

由于

Answer 1

假设你的jsfiddle中的dataTotal是图表上所有柱的总和：

   tooltip: {
        formatter: function() {                    
                var pcnt = (this.y / 37170000) * 100;
         return this.x + ' ' + Highcharts.numberFormat(pcnt) + '%';
            }         
    },
    series: [{

计算highcharts中的百分比和格式

1 个答案: