时间戳

首页 > 解决方案 > 修改谷歌图表中的最大值

javascript - 修改谷歌图表中的最大值

问题描述

我想制作一个电子邮件点击率图表，这个 CTR 的值从0.5到非常小100，但是当我将它显示在具有 10 000 个值（每天发送的电子邮件）的条形旁边时，小的 CTR 条/线也是图表低且不可见。

我需要为这个 CTR 值指定一个最小值/最大值，以便在图表的最顶部，100例如，我需要在这个默认的谷歌代码中修改什么，其中平均线可以是我的 CTR 率? 0.5所以我让那条线转到100

https://jsfiddle.net/6mn4typ0/

标签： javascriptchartsgoogle-visualizationmax

解决方案

将 CTR 放在辅助轴上，
并在那里设置最小值和最大值 

series: {
  5: {
    targetAxisIndex: 1,  // <-- set as secondary axis
    type: 'line'
  }
},
vAxes: {  // <-- use vAxes for secondary axis options
  1: {
    title: 'Average',
    viewWindow: {  // <-- set view window
      min: 0,
      max: 100
    }
  }
}

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05', 10165, 12938, 10522, 15998, 14450, 0.6],
    ['2005/06', 10135, 13120, 11599, 11268, 12288, 20.6],
    ['2006/07', 11157, 10167, 12587, 12807, 13397, 40.9],
    ['2007/08', 12139, 11110, 11615, 10968, 12215, 80.4],
    ['2008/09', 13136, 11691, 10629, 11026, 13366, 90.6]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: 'Cups'},
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {
      5: {
        targetAxisIndex: 1,
        type: 'line'
      }
    },
    vAxes: {
      1: {
        title: 'Average',
        viewWindow: {
          min: 0,
          max: 100
        }
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

推荐阅读