在highchart饼图悬停上添加多个标题

时间:2017-07-18 06:03:52

标签: javascript jquery html css highcharts

我必须在悬停时在highCharts饼图中显示两个标题(查看图片)HighCharts_PieChart_Issue

我想在悬停时显示百分比值,并且我已将已计算的百分比计算到数组中。

我希望只显示指定产品的百分比。

当我通过时,我将所有产品的所有值都作为百分比(请参阅小提琴)

Fiddle

这是我尝试过的一段代码:

var anewVar = [0.0, 17.6, 0.0, 0.0, 6.6, 34.3, 17.1, 0.0, 0.0, 0.5, 0.0, 23.9] // just a dummy array, actually want to display the percentage that we get ( for eg, mustard oil is 17.6 % ) on hover with amount( as shown )

Highcharts.chart('pieholder', {
    chart: {
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Productwise Sale ( Amt )'
    },
    plotOptions: {
        pie: {
            size: '50%',
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Percent : ' + anewVar + ' <br> Amount',
        colorByPoint: true,
        color: ['#AA4643'],
        data: [{
            name: 'Coconut Oil',
            y: 14211
        }, {
            name: 'ALMOND OIL',
            y: 0
        }, {
            name: 'Oil',
            y: 312
        }, {
            name: 'Special Oil',
            y: 0
        }, {
            name: 'Special Combo Offer',
            y: 0
        }, {
            name: 'Dairy Special',
            y: 10156
        }, {
            name: 'Sunflower Oil',
            y: 20390
        }, {
            name: 'Dairy Taaza Pure Milk ',
            y: 3937
        }, {
            name: 'JASMINE OIL',
            y: 0
        }, {
            name: 'AMLA OIL',
            y: 0
        }, {
            name: 'Mustard Oil',
            y: 10432
        }, {
            name: 'New Oil',
            y: 0,

        }]
    }]
});

每个标题上出现的百分比由highCharts动态计算(希望如此!,只是假设)但是我在数组中进行计算并希望在悬停时将其显示在产品上(就像它显示在标题上一样) ,我希望它在悬停在它上面时显示百分比)

任何人都可以帮我怎么做?

或者我有什么其他办法可以实现它吗?

  

已经彻底搜索了堆栈溢出,github但无法找到解决方案。提到的所有答案都有两个单独的图表   或者与我的要求不同的东西

     

注意:那些下注的人,请发表评论或回答。

1 个答案:

答案 0 :(得分:1)

使用tooltip.formatter

// Last Name: John Smith
// Age:       50

// Name: John Smith
// Age:  50

Updated fiddle