javascript - 如何在谷歌图表中添加新的Y刻度

Question

我在 stackoverflow 帖子中尝试了很多答案，但我无法在我的 Google 图表中添加另一个 Y 刻度，有人可以帮助我吗？

这是我当前的输出:

我需要这个输出:

//here you can put data in javascript format
//String, int, int
var data = google.visualization.arrayToDataTable([
    ['Week', 'IE/Week',{ role: 'style' }, { role: 'annotation' }, { role: 'style' }, 'IE/Day', { role: 'style' }, { role: 'annotation' }],
    [ week1,  valuer1, '#5A9AD4', valuer1, '#000000', valueDay1, '#ED7D30', valueDay1],
    [ week2,  valuer2, '#5A9AD4', valuer2, '#000000', valueDay2, '#ED7D30', valueDay2],
    [ week3,  valuer3, '#5A9AD4', valuer3, '#000000', valueDay3, '#ED7D30', valueDay3],
    [ week4,  valuer4, '#5A9AD4', valuer4, '#000000', valueDay4, '#ED7D30', valueDay4],
    [ week5,  valuer5, '#5A9AD4', valuer5, '#000000', valueDay5, '#ED7D30', valueDay5]
]);

var options = {
        annotations: {
            textStyle: {
              fontSize: 16,
              bold: true,
              color: 'black'
            }
          },
  title : 'IE Trends Weekly and Daily',
  titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: '18', fontWidth: 'normal'},
  vAxes: { 0: {logScale: false}, 1: {logScale: false}},
  vAxes: { 1: {logScale: false}, 2: {logScale: false}},
  series:{
      titleTextStyle: {color: 'black'},
      0:{targetAxisIndex:0},
      1:{targetAxisIndex:1}
  },
  pointSize:8,
  color: 'black',
  lineWidth: 2,
  hAxis: {title: ''},

  seriesType: 'bars',
  series: {0: {type: 'bar'}, 1: {type: 'line'}}
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);

Answer 1

你很接近。您在选项对象中定义了两次键“series”，覆盖了之前定义的“targetAxisIndex”。尝试使用以下选项:jsfiddle

//here you can put data in javascript format
//String, int, int
var data = google.visualization.arrayToDataTable([
    ['Week', 'IE/Week',{ role: 'style' }, { role: 'annotation' }, { role: 'style' }, 'IE/Day', { role: 'style' }, { role: 'annotation' }],
    [ week1,  valuer1, '#5A9AD4', valuer1, '#000000', valueDay1, '#ED7D30', valueDay1],
    [ week2,  valuer2, '#5A9AD4', valuer2, '#000000', valueDay2, '#ED7D30', valueDay2],
    [ week3,  valuer3, '#5A9AD4', valuer3, '#000000', valueDay3, '#ED7D30', valueDay3],
    [ week4,  valuer4, '#5A9AD4', valuer4, '#000000', valueDay4, '#ED7D30', valueDay4],
    [ week5,  valuer5, '#5A9AD4', valuer5, '#000000', valueDay5, '#ED7D30', valueDay5]
    ]);

var options = {
  annotations: {
    textStyle: {
      fontSize: 16,
      bold: true,
      color: 'black'
  }
},
title : 'IE Trends Weekly and Daily',
titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: '18', fontWidth: 'normal'},
vAxes: { 0: {logScale: false}, 1: {logScale: false}},
vAxes: { 1: {logScale: false}, 2: {logScale: false}},
series:{
    titleTextStyle: {color: 'black'},
    0: { type: 'bar', targetAxisIndex:0},
    1: { type: 'line', targetAxisIndex:1}
},
pointSize:8,
color: 'black',
lineWidth: 2,
hAxis: {title: ''},

seriesType: 'bars'
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);