HighCharts-如何将最大值设置为100％

Question

我有一个条形图，其值通过循环转换为百分比。当返回我的值时，它似乎完全按照我的期望显示了数据，但是图形以空值超出了100％。我试图在max: 100上设置一个yaxis，但无法将其设置为100％。

[添加max:100时，它在我的图形中显示一个条形，这就是为什么我认为它专注于100而不是100％的原因。

在Highcharts中有没有办法解决这个问题？

这里是jsfiddle

从照片中可以看出，它似乎只能计算100％，但图形以104％结尾。

我的预期结果是，图表末尾的百分比为100％。

这是我的代码：

let data = [10, 31, 13, 19, 21, 50, 10]

let dataSum = 0

for (let i = 0; i < data.length; i++) {
dataSum += data[i]
}

console.log(dataSum, "dataSum")

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
               labels: {
            formatter: function () {
                var pcnt = (this.value / dataSum) * 100;
                return Highcharts.numberFormat(pcnt, 0, ',') + '%';
            }
        },

    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Low',
    index: 4,
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }, {
    name: 'Medium-Low',
    index: 3,
    color: '#0B7070',
    data: [data[2]]
  }, {
    name: 'Medium',
    index: 2,
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Low',
    index: 5,
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, 
  {
    name: 'Medium-High',
    index: 1,
    color: '#DD5F0C',
    data: [data[4]]
  }, {
    name: 'High',
    index: 0,
    color: '#C50710',
    data: [data[5]]
  }]
});

Answer 1

在此情况下，由于高价图默认是对价，因此即使没有百分比，您也可以获得额外的值。看到。 fiddle with the issue.

所以您可以做的是，可以使用tickPositioner函数根据您的数据呈现点击。然后将格式器中标签的值转换为百分比。除此之外，到目前为止，我找不到其他方法可以执行此操作。看到。 fiddle with the proposed solution.

调整您的数据，使百分比看起来与数据一致。

最欢迎其他一些建议/更正