Question

我正在处理图表，我必须以百分比形式显示序列数据。将第一个系列数据视为总价值，而对于另一个系列，则计算其相对于总价值的百分比

例如

series: [{
        name: 'Total value',
        data: [50,100,50,100,50,]
      }, {
        name: 'Value 1',
        data: [5,20,10,62,31,]
      }]

我具有系列数据的这些值，并且需要计算value1字段的百分比，该百分比将是（5 * 100）/ 50 = 20％（50被认为是总价值）

所有值都相同。我尝试了很多方法，但是它认为总值是50 + 5，即两个数据字段的总和。

有人可以帮助我解决此问题吗？我在链接

上上传了海图

        Highcharts.chart('container', {
  chart: {type: 'area' },

  xAxis: { categories: ['A','B','C','D','E',] },
  yAxis: {  min: 0,
    allowDecimals: false,
    title: { text: ' Count'}, },
    tooltip: {
    headerFormat: '<b>{point.x}</b>  ',
    pointFormat: '{series.name}:  {point.y}<br> ({point.percentage:.1f}%)'
  },
plotOptions: {
  column: {
      pointPadding: 0.2,
        borderWidth: 0,stacking: 'normal',
      dataLabels: {
        enabled: true,},},
        series: {
            cursor: 'pointer',}}, 
  series: [{
    name: 'Total value',
    data: [50,100,50,100,50,]
  }, {
    name: 'Value 1',
    data: [5,20,10,62,31,]}]});

Answer 1

您可以通过在工具提示中使用pointFormatter来实现自己的目标，如下所示：

pointFormatter: function() {
  return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}

此外，如果在系列中移动工具提示格式，则只会以所需方式显示该系列的工具提示，而不会显示整个系列。像这样：

series: [{
  name: 'Total value',
  data: [50, 100, 50, 100, 50, ]
}, {
  name: 'Value 1',
  data: [5, 20, 10, 62, 31, ],
  tooltip: {
    headerFormat: '<b>{point.x}</b>  ',
    pointFormatter: function() {
      return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
    }
  }
}]

    Highcharts.chart('container', {
      chart: {
        type: 'area'
      },

      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', ]
      },
      yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
          text: ' Count'
        },
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          stacking: 'normal',
          dataLabels: {
            enabled: true,
          },
        },
        series: {
          cursor: 'pointer',
        }
      },
      series: [{
        name: 'Total value',
        data: [50, 100, 50, 100, 50, ]
      }, {
        name: 'Value 1',
        data: [5, 20, 10, 62, 31, ],
        tooltip: {
          headerFormat: '<b>{point.x}</b>  ',
          pointFormat: '{series.name}:  {point.y}<br> ({point.percentage:.1f}%)',
          pointFormatter: function() {
            return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
          }
        }
      }]
    });

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

工作示例： https://jsfiddle.net/ewolden/eudhkgp3/

高图：比较系列数据并显示百分比

1 个答案: