javascript - 在垂直轴谷歌图表上添加标题

Question

我有以下代码来使用谷歌图表制作折线图:

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

var stream = {{ stream }}
var maximum = {{ maximum }}
var minimum = {{ minimum }}
var unit = {{ unitlabel }}

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Timestamp');
  data.addColumn('number', 'Actual value');

  data.addRows(stream);

  var options = {
  width: 1500,
  height: 500,
  isStacked: false,
  title: "kWh",
   axes: {
        title: "kWh",
        y: {
            title: "kWh",
            all: {
                title: "kWh",
                format: { pattern: 'decimal'},
                range: {
                    max: maximum,
                    min: minimum
                }
            }
        }
    },
    };

  var chart = new google.charts.Line(document.getElementById('curve_chart'));

  chart.draw(data, options);
}

我试图将我的 y 轴标记为 kWh，以便人们知道单位是什么。正如你所看到的，我在几个地方添加了标题:“kWh”，但没有一个产生预期的结果。我还能尝试什么？

谢谢。

Answer 1

使用以下选项...

vAxis: {
  title: 'kWh'
}

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    title: 'Chart Title',
    curveType: 'function',
    legend: {
      position: 'bottom'
    },
    vAxis: {
      title: 'kWh'
    }
  };

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

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

编辑

设置 Material 图表中的标题，

首先为轴命名，然后为命名轴设置label选项

请参阅以下工作片段，这里我使用 kWh 作为名称和标签...

google.charts.load('current', {
  callback: drawChart,
  packages: ['line']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    chart: {
      title: 'Chart Title'
    },
    legend: {
      position: 'bottom'
    },
    series: {
      0: {axis: 'kWh'}
    },
    axes: {
      y: {
        kWh: {label: 'kWh'}
      }
    }
  };

  var chart = new google.charts.Line(document.getElementById('curve_chart'));
  chart.draw(data, options);
}

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