highcharts 在柱状图中使用分隔符时x轴标签类别覆盖

6gpjuf90  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(172)

当我使用xAxis类别时,xAxis的标签会像下面的例子一样重叠。有解决方案吗?一种停止重叠的方法。有没有方法可以使用xAxis类别的分隔符?
示例:Breaks bug

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        alignTicks:false,
        zoomType: 'xy',
        resetZoomButton: {
            position: {
                align: 'left',
                verticalAlign: 'top', 
                x: 10,
                y: 10
        },
            relativeTo: 'chart'
        }, 

    },

    xAxis: {
         categories: ["2022-06-06","2022-06-07","2022-06-08","2022-06-09","2022-06-10","2022-06-11","2022-06-12","2022-06-13"],
   breaks:[{
   from:2,
   to:3
   }]
    },
    yAxis:{
        title:{
            text : '%'
        },

        max: 100,
    },  
    series: [{
        color: "#e88307",
        type: "spline",
        data: [99.68,99.69,99.68,99.62,99.62,99.59,99.57,99.67]
    },{
        color: "#9d07e8",
        type: "spline",
        data: [99.89,99.89,99.89,99.88,99.88,99.88,99.88,99.89]
    },{
        color: "#0738e8",
        type: "spline",
        data: [98.86,98.85,98.94,98.55,97.42,96.75,96.79,96.46]
    },{
        color: "#07e838",
        type: "spline",
        data: [98.4352499872,98.4351670785,98.5149062688,98.057699388,96.9333442352,96.23770101,96.2581544364,96.0359261498]
    }]
});
deyfvvtc

deyfvvtc1#

响应式规则应该在这里改变工作标签的显示方式,你可以使用xAxis.labels.rotationxAxis.labels.stepxAxis.labels.staggerLines

responsive: {
    rules: [{
      condition: {
        maxWidth: 1000
      },
      chartOptions: {
        xAxis: {
          labels: {
            rotation: -45,
          }
        }
      }
    }]
  }

演示:https://jsfiddle.net/BlackLabel/2kzx6n3r/

相关问题