ChartJS 百分比轴仅在正值范围内

pod7payv 于 12个月前发布在 Chart.js

关注(0)|答案(2)|浏览(136)

如何将百分比刻度限制在第一个Y轴的正范围内？划掉的曲线应仅显示在正区域，如图所示。

的数据
我目前的Y轴配置：

y: {
        type: 'linear', 
        position: 'left',
        stacked: true,
        ticks: {
           stepSize: 1000,
           font: {
             size: 20,
           }
        }
      },
    
      y2: {
        type: 'linear',
        position: 'right',
        min: 0,
        max: 100,
        grid: {
            drawOnChartArea: false
        },
        ticks: {
           stepSize: 20,
           font: {
             size: 20,
           },
           callback: function(value, index, values) {
              return value + ` %`;
           }
        }
      },

    }

字符串

chart.js

来源：https://stackoverflow.com/questions/77665522/percentage-axis-only-in-positive-range

2条答案

按热度按时间

vsikbqxv1#

解决方案如下：

y2: {
        type: 'linear',
        display: 'auto',
        position: 'right',
        min: -100,
        max: 100,
        grid: {
            drawOnChartArea: false
        },
        ticks: {
           stepSize: 20,
           font: {
             size: 20,
           },
           callback: function(value, index, values) {
              return value >= 0 ? value + ' %' : '';
           }
        }
      },

字符串

的数据

赞(0）回复(0）举报 12个月前

eh57zj3b2#

谢谢你的提示，下面的代码应该更适合。

y2: {
  type: 'linear',
  display: 'auto',
  position: 'right',
  min: (context) => {
      return (context.chart.scales.y.min / context.chart.scales.y.max * 100)
  },
  max: 100,
  grid: {
      drawOnChartArea: false
  },
  ticks: {
     stepSize: 20,
     font: {
       size: 20,
     },
     callback: function(value, index, values) {
        return value >= 0 ? value + ' %' : '';
     }
  }
},

字符串
它并不总是正确工作，如果你通过点击图例来隐藏值。我不知道为什么。

赞(0）回复(0）举报 12个月前

我来回答

ChartJS 百分比轴仅在正值范围内

2条答案

相关问题

热门标签

最新问答