Highcharts.js自定义Y轴刻度：如何将Y轴最大值设为100并调整象限高度

看起来你已经完成了大部分配置，现在只需要调整两个关键部分：Y轴刻度的显式指定和象限框高度的比例计算，就能实现你想要的效果。下面是具体的修改方案：

1. 修正Y轴刻度，只显示70和100 #

你当前用tickInterval:70，但Y轴min:0、max:100的情况下，Highcharts会默认显示0和70（因为0+70=70，下一个70+70=140超过了max100），所以不会自动显示100。要强制指定显示的刻度，应该用ticks数组定义具体的刻度值，同时关闭第一个标签（0）的显示：

yAxis:{
    title:{
        text:'Passion',
        rotation:270,
        margin:25,
    },
    min:0,
    max:100,
    // 替换tickInterval为ticks数组，指定要显示的刻度
    ticks: [70, 100],
    tickLength:3,
    minorTickLength:0,
    lineColor:'#ccc',
    lineWidth:1,
    // 隐藏默认的0刻度标签
    showFirstLabel: false
},

2. 调整象限框高度，让下方框更大 #

之前你把plotBox.height直接均分了，但要实现下方象限更高，需要根据Y轴的数值范围比例来计算像素高度。我们把70作为上下象限的分界点：

• 上方象限对应Y值70-100，数值跨度是30
• 下方象限对应Y值0-70，数值跨度是70

根据这个比例计算对应的像素高度，同时注意Highcharts的Y轴是向上数值递增，所以plotBox的顶部对应Y=100，底部对应Y=0。修改渲染rect的部分：

function(chart) { // on complete
    var width = chart.plotBox.width / 2.0;
    var totalYRange = chart.yAxis[0].max - chart.yAxis[0].min; // 100-0=100
    var upperYRange = chart.yAxis[0].max - 70; // 100-70=30
    var lowerYRange = 70 - chart.yAxis[0].min; //70-0=70
    // 计算上下部分的像素高度
    var upperHeight = chart.plotBox.height * (upperYRange / totalYRange);
    var lowerHeight = chart.plotBox.height * (lowerYRange / totalYRange);

    // 上方左象限（蓝色）：Y70-100，X0-50
    chart.renderer.rect(chart.plotBox.x, chart.plotBox.y, width, upperHeight, 1)
        .attr({ fill: '#3948cf', zIndex: 0 })
        .add();
    // 上方右象限（绿色）：Y70-100，X50-100
    chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y, width, upperHeight, 1)
        .attr({ fill: '#00be1d', zIndex: 0 })
        .add();
    // 下方左象限（红色）：Y0-70，X0-50
    chart.renderer.rect(chart.plotBox.x, chart.plotBox.y + upperHeight, width, lowerHeight, 1)
        .attr({ fill: '#ff0000', zIndex: 0 })
        .add();
    // 下方右象限（橙色）：Y0-70，X50-100
    chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y + upperHeight, width, lowerHeight, 1)
        .attr({ fill: '#ff4e00', zIndex: 0 })
        .add();
});

为什么之前只改rect没用？ #

你之前修改rect()只是调整了彩色覆盖层的大小，但Y轴的刻度配置没跟上——默认的tickInterval逻辑不会显示100刻度，而且均分的高度也不符合你“下方更高”的需求。现在结合Y轴的ticks配置和按比例计算的象限高度，就能同时满足两个需求了。

把这两部分修改后，你的图表应该就能实现：Y轴只显示70和100，且下方的象限框高度明显大于上方。

内容的提问来源于stack exchange，提问作者Marcus Christiansen