1

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

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”，但它们都没有产生预期的结果。我还能尝试什么？

谢谢。

4

1 回答 1

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>

编辑

在材料图表中设置标题，

首先命名轴，然后设置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>

于 2017-05-23T12:49:56.167 回答