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/（由提问者更新重叠）

Highchart.js自定义Y轴自动收报机

1 个答案: