HighCharts JS 柱形图 y 轴超出上限

问题描述 投票：0回答：1

致力于构建一个 highcharts 元素，以柱状条形图显示最近 20 场比赛的“爆头百分比”。

我遇到的问题是，尽管设置了 yAxis 值范围

floor: 0, ceiling: 100,
我的图表顶部刻度为 120%。

如果我将上限金额降低到 90> 那么它会准确地将上限设置为正确的值。

注意：我已经测试过，尝试创建区域时我的系列值超过 100 是否会导致问题，尽管它似乎没有效果。

JSFIDDLE 链接：https://jsfiddle.net/Lukeolafp/vt49zhdx/

代码（以防 JSFiddle Fork 停止工作）

JS：

document.addEventListener('DOMContentLoaded', function () {
  const chart = Highcharts.chart('container', {
      chart: {
          type: 'column',
          backgroundColor: '#2A2A2A',
      },

      title: false,

      subtitle: false,

      xAxis: {
          categories: ['Game 1', 'Game 2', 'Game 3','Game 4', 'Game 5', 'Game 6','Game 7', 'Game 8', 'Game 9','Game 10',
                      'Game 11', 'Game 12', 'Game 13','Game 14', 'Game 15', 'Game 16','Game 17', 'Game 18', 'Game 19','Game 20'
                    ],
          labels: {
            enabled: false
          }
          
      },
      yAxis: {
        floor: 0,
        ceiling: 100,
        tickAmount: 4,
        title: {
          text: null
        },
        labels: {
          formatter: function() {
          return this.value + ' %';
          },
          style: {
          fontSize: 10,
          color: '#FFF',
          fontFamily: 'Helvetica Neue',
          fontWeight: 'regular'
          },
        },
      },

      credits: {
        enabled: false
      },
      
      plotOptions: {
        series: {
            pointWidth: 9,
            borderRadius: 3,
            borderWidth: 0
        }
      },

      series: [{
          name: 'Headshot %',
          showInLegend: false,
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 99, 100, 34, 13, 35, 15, 12, 19, 11, 13, 22],
          zones: [{
            value: 15,
            color: '#ffffff'
          },{
            value: 30,
            color: '#A2F8B5',
          },{
            value: 45,
            color: '#42DC64',
          }, {
            value: 90,
            color: '#00B828',
          },{
            value: 100,
            color: {
              linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
              stops: [
                  [0, '#C9A44B'], // start
                  [0.5, '#F7E991'], // middle
                  [1, '#C9A44B'] // end
              ]
            }
          },{
            value: 101,
            color: '#FF78F2'
          }]
      }]
  });
});

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML CSS JS ISOLATE TEST ENVIROMENT</title>
        <link rel="stylesheet" href="Styles.css">
    </head>

    <body>

        <div class="sidePanelHeadshotHighChart" id="container"></div>

        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="heatmap.js-master/build/heatmap.min.js"></script>
        <script src="script.js"></script>
    </body>
    

</html>

CSS：

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #505050;
}

.sidePanelHeadshotHighChart {
  height: 64px;
  width: 283px;
  /* height: 400px;
  width: 100%; */
  margin-top: 100px;
}
javascript graph highcharts
1个回答
0
投票

High Charts js 文档显示 

min
和 
max
，而不是 
floor
和 
ceiling
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.