作者您好,请问如何修改Y轴的网格线到如图所示的位置?我想修改成每条网格线对应每个折线点

[XcodePlayer]

代码如下

[AAChartModel]

问:

Highcharts 默认marker 是在两个网格线之间居中的位置, 我想让 marker 在网格线上, 应该怎么做?

答:

Highcharts 默认情况下, marker 的确是绘制在两个网格线之间的中心位置. 想要将 marker 定位在网格线上, 可以通过设置 xAxis.tickmarkPlacement 属性为 'on' 来实现.

代码示例:

Highcharts.chart('container', {
    xAxis: {
        tickmarkPlacement: 'on' // 将刻度线放置在网格线上
    },
    // ... 其他图表配置
});

设置 tickmarkPlacement: 'on' 之后:

• x 轴的刻度线将与网格线重合.
• marker 会根据数据点的位置自动绘制在最近的刻度线(也就是网格线)上.

希望以上信息能够帮到您!

以上内容由我整理自在线 AI 工具.

[AAChartModel]

参考:

• https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement

类似这样配置代码即可:

Highcharts.chart('container', {
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ],
        tickWidth: 1,
        gridLineWidth: 2,
        gridLineDashStyle: 'longdash',
        tickmarkPlacement: 'on'
    },
     yAxis: {
        gridLineWidth: 0,
    },
  

    series: [{
        data: [
            29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
            95.6, 54.4
        ]
    }]
});

[XcodePlayer]

非常感谢作者百忙之中能帮忙解决这个问题!!!