谷歌图表显示选项答案

【问题标题】：Google Charts display options谷歌图表显示选项
【发布时间】：2018-09-06 09:53:06
【问题描述】：

我的问题（短文）

能否自定义 y 轴标注间隔？
您能否将系列的极值显示为水平线？

详细说明

我有一个用 Google Charts 制作的组合图表：第一组数据使用区域样式，第二组数据使用线条样式。第二个是这里重要的：

它代表一个百分比
我不希望它从 0 到 1（或 0 到 100 的百分比），而是从它的最小值到最大值（或接近的值）
我想显示这些最小值和最大值

如果我这样修改比例：

PHP

$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);

var options = {
    ...
    vAxes: {
        ...
        1: {
            format:"##%",
            viewWindow: {
                min: <?php echo ($min_taux_rejet / 100); ?>,
                max: <?php echo ($max_taux_rejet / 100); ?>,
            },
        },
    },
    series: {
        0: {
            targetAxisIndex: 0,
            type: 'area',
        },
        1: {
            targetAxisIndex: 1,
            type: 'line',
        },
    }
}

对于最小值和最大值，纵轴被限制为最接近 5 的倍数，但是：

轴上显示的区间是10到10，太大了。由于我的实际最大值为 31.5，实际最小值为 17.1，轴最小值为 15 为 15，轴最大值为 35，但标记的唯一刻度是 20 和 30。
我在图表上看不到真正的最小值和最大值

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

您可以使用配置选项ticks，这是一个用于标签的值数组...

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [0, 18, 0.171],
    [1, 28, 0.315],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  var axisMin = 0.15;
  var axisMax = 0.35;
  var ticks = [];
  for (var i = axisMin; i <= axisMax; i = i + 0.05) {
    ticks.push(i);
  }

  var options = {
    vAxes: {
      1: {
        format: '##%',
        ticks: ticks,
        viewWindow: {
          min: axisMin,
          max: axisMax,
        },
      },
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        targetAxisIndex: 1,
        type: 'line',
      },
    }
  };

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：