如何在JavaScript中为Google折线图添加正确的刻度线？

要实现Google折线图的主/次刻度线（而非贯穿网格线），需要通过gridlines与tickMarks（主刻度）、minorGridlines与minorTickMarks（次刻度）的组合配置，替换默认的网格线显示逻辑：

核心配置逻辑 #

1. 隐藏贯穿网格线：设置gridlines.count: 0避免自动生成额外网格线，同时用gridlines定义轴内侧的刻度线段，tickMarks定义轴外侧的刻度线段，两者结合实现“交叉穿过基线”的效果。
2. 匹配主刻度参数：
   • 用ticks指定主刻度位置
   • 通过gridlines和tickMarks的length（12px）、thickness（1px）、color（黑色）配置样式
3. 匹配次刻度参数：
   • 用minorTicks指定次刻度位置
   • 通过minorGridlines和minorTickMarks的length（6px）、thickness（1px）、color（黑色）配置样式

修改后的完整代码 #

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineColors);

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Absorbance');

  data.addRows([
    [380, 0.12],    
    [390, 0.098],   
    [400, 0.088],  
    [410, 0.12],   
    [420, 0.292],  
    [430, 0.302],
    [440, 0.444],   
    [450, 0.636],  
    [460, 0.774],  
    [470, 0.998],  
    [480, 1.428], 
    [490, 1.862],
    [500, 1.954], 
    [510, 1.45], 
    [520, 0.774], 
    [530, 0.364], 
    [540, 0.16], 
    [550, 0.134],
    [560, 0.074], 
    [570, 0.06], 
    [580, 0.076], 
    [590, 0.046], 
    [600, 0.0004], 
    [610, 0.008],
    [620, 0.006], 
    [630, 0.0006], 
    [640, 0.016], 
    [650, 0.002], 
    [660, 0.056], 
  ]);

  var options = {
    title: 'Analytical Spectrum',
    titleTextStyle: {
      fontName: 'Courier Prime', 
      fontSize: 30, 
      bold: true, 
      color: 'black'
    },
    height: 500,
    width: 900,
    hAxis: {
      title: 'Wavelength (nm)',
      titleTextStyle: {
        fontName: 'Courier Prime',
        fontSize: 18,
        bold: true,
        italic: false
      },
      textStyle: {
        fontName: 'Courier Prime',
        fontSize: 16,
        bold: true,
        color: 'black'
      },
      // 主刻度内侧线段（穿过基线向内）
      gridlines: {
        color: '#000',
        length: 12,
        thickness: 1,
        count: 0
      },
      // 主刻度外侧线段（轴外延伸）
      tickMarks: {
        color: '#000',
        length: 12,
        thickness: 1
      },
      minTextSpacing: 1,
      baseline: 380,
      ticks: [400, 450, 500, 550, 600, 650],
      // 次刻度位置
      minorTicks: [425, 475, 525, 575, 625],
      // 次刻度内侧线段
      minorGridlines: {
        color: '#000',
        length: 6,
        thickness: 1,
        count: 0
      },
      // 次刻度外侧线段
      minorTickMarks: {
        color: '#000',
        length: 6,
        thickness: 1
      }
    },
    vAxis: {
      title: 'Absorbance (AU)',
      titleTextStyle: {
        fontName: 'Courier Prime',
        fontSize: 18,
        bold: true,
        italic: false
      },
      textStyle: {
        fontName: 'Courier Prime',
        fontSize: 16,
        bold: true,
        color: 'black'
      },
      gridlines: {
        color: '#000',
        length: 12,
        thickness: 1,
        count: 0
      },
      tickMarks: {
        color: '#000',
        length: 12,
        thickness: 1
      },
      baseline: 0,
      ticks: [0, 0.5, 1.0, 1.5, 2.0],
      minorTicks: [0.25, 0.75, 1.25, 1.75],
      minorGridlines: {
        color: '#000',
        length: 6,
        thickness: 1,
        count: 0
      },
      minorTickMarks: {
        color: '#000',
        length: 6,
        thickness: 1
      }
    },
    legend: 'none',
    lineWidth: 5,
    colors: ['#0000ff']
  };

  var chart = new google.visualization.LineChart(document.getElementById('AnalyticalSpectrum'));
  chart.draw(data, options);
}

关键注意点 #

• gridlines和tickMarks的length值可按需调整，若仅需单侧刻度线，保留其中一个配置即可
• count: 0确保不会自动生成额外的网格线/刻度线，仅显示指定的ticks和minorTicks位置
• 数值类型配置（如length、thickness）无需加引号，避免类型错误

内容的提问来源于stack exchange，提问作者Tatiana Rivera