如何在highcharts

Question

我有一个柱形图，它显示两个系列，包含数年的数据。

Y轴是一个数字 X轴是一年

每年都有一个系列（两个）的列。

我想为这些列创建一个数据标签，显示每年的两列（系列值）的总和的百分比。要做到这一点，我需要引用当前y值和给定类别（年）中两个y值的总和。

我尝试过这样的事情：

          series: {
                dataLabels:{
                    enabled:true,
                    formatter:function() {
                        var pcnt = (this.y / (series[0].y + series[1].y)) * 100;
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }
            }

在对两者和＆＃34;这个＆＃34;进行求和时尝试使用系列索引。用于引用当前列的y值的关键字，但这不起作用（图表不显示和控制台注释：

  

未捕获的ReferenceError：未定义系列

以下是我正在进行的工作的jsfiddle

以下是我试图为此图表实施的强制代码的副本

$(function () {


     $('#e_74').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
        enabled: false
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '20px'
            }
        },
        title: {
            text: 'Title',
        },
        navigation: {
            buttonOptions:
            {
                enabled: false
            }
        },
        xAxis: {
              categories: [2013]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of facilities'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:,.0f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0
                },
            series: {
dataLabels:{
                        enabled:true,
                        formatter:function() {
                            var pcnt = (this.y / (series[0].y + series[1].y) * 100;
                            return Highcharts.numberFormat(pcnt) + '%';
                        }
                    }
                }
            },
            series: [{showInLegend: true, name: 'With trained staff', data: [350]}, {showInLegend: true, name: 'Without trained staff', data: [500]}]
        });
    });

Answer 1

您可以使用

访问格式化程序功能中的图表

var previousWidth;
var detectBigChange = function () {
  var newWidth = window.innerWidth || document.body.clientWidth;
  if (!!previousWidth && Math.abs(newWidth - previousWidth) > 100) {
    console.log("Big change!");
  }
  previousWidth = newWidth;
}

window.addEventListener('resize', detectBigChange);
detectBigChange();

请参阅updated fiddle。为了防止我遗漏了什么，我留下了一个console.log语句，这样你就可以看到什么以及如何访问其他数据。作为旁注，您还在格式化程序中缺少结束括号：

var chartt = $('#e_74').highcharts();

Answer 2

这是working fiddle

        dataLabels:{
                    enabled:true,
                    formatter:function(e) {
                        var ChartX = $('#e_74').highcharts();                            
                        var pcnt = (this.y / (ChartX.series[0].yData[0] + 
                        ChartX.series[1].yData[0]) * 100);
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }