Question

我的问题（简短样式）

您可以自定义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);

JS

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。
我在图表上看不到最大和最小值

Answer 1

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

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

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>

Google图表显示选项

1 个答案: