Highchart.js Custom Y-Axis Ticker

Question

Я настроил квадрант Highchart.js следующим образом.

Я сражаюсь, чтобы выяснить, как я могу установить верхнюю y-осевое значение равно 100 вместо 140. Я установил тикер на 70, так как мне требуется, чтобы ось Y отображала один тикер на 70, а максимальный на 100. Высота каждого блока также должна отражать это так, чтобы нижний рядкоробки выше, чем верх.

Мой код выглядит следующим образом:

var qx = $('#quadrant-x').attr('data-match');
            var qy = $('#quadrant-y').attr('data-match');

            // Highchart Data
            var data = [
                { x:parseInt(qx), y:parseInt(qy) }
            ];

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'quadrant',
                    defaultSeriesType:'scatter',
                    borderWidth:1,
                    borderColor:'#ccc',
                    marginLeft:90,
                    marginRight:50,
                    backgroundColor:'#eee',
                    plotBackgroundColor:'#fff',
                },
                credits:{enabled:false},
                title:{
                    text:''
                },
                legend:{
                    enabled:false                                
                },
                // tooltip: {
                //     formatter: function() {
                //         return '<b>'+ this.series.name +'</b><br/>'+
                //             this.x +': '+ this.y;
                //     }
                // },
                plotOptions: {
                    series: {
                        shadow:false,
                    }
                },
                xAxis:{
                    title:{
                        text:'Persistence'
                    },
                    min:0,
                    max:100,
                    tickInterval:50,
                    tickLength:0,
                    minorTickLength:0,
                    gridLineWidth:1,
                    showLastLabel:true,
                    showFirstLabel:false,
                    lineColor:'#ccc',
                    lineWidth:1                
                },
                yAxis:{
                    title:{
                        text:'Passion',
                        rotation:270,
                        margin:25,
                    },
                    min:0,
                    max:100,
                    tickInterval:70,
                    tickLength:3,
                    minorTickLength:0,
                    lineColor:'#ccc',
                    lineWidth:1        
                },
                series: [{
                    color:'white',
                    data: data
                }]
            }, function(chart) { // on complete

                var width = chart.plotBox.width / 2.0;
                var height = chart.plotBox.height / 2.0 + 1;

                // console.log(chart);
                // console.log(chart.plotBox.x);
                // console.log(width);
                // console.log(chart.plotBox.y);
                // console.log(height);

                chart.renderer.rect(chart.plotBox.x, chart.plotBox.y, width, height, 1)
                    .attr({
                        fill: '#3948cf',
                        zIndex: 0
                    })
                    .add();

                chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y, width, height, 1)
                    .attr({
                        fill: '#00be1d',
                        zIndex: 0
                    })
                    .add();

                chart.renderer.rect(chart.plotBox.x, chart.plotBox.y + height, width, height, 1)
                    .attr({
                        fill: '#ff0000',
                        zIndex: 0
                    })
                    .add();

                chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y + height, width, height, 1)
                    .attr({
                        fill: '#ff4e00',
                        zIndex: 0
                    })
                    .add();
            });

Я пытался установить разные значения в функции rect (), но это только меняет цветное наложение.

Есть ликакой вариант мне не хватает?

Answer 1

Вы можете установить собственные значения тиков, используя tickPositions.Тогда yAxis будет

yAxis: {
  tickPositions: [0, 70, 100],
  ...
}

Рабочий jsfiddle: https://jsfiddle.net/v4s3gsm9/1/ (оверлей обновлен asker)