Google圖表-水平軸上的最大值和最小值

Question

我制作了一個折線圖，水平軸上有星期數。 它打算顯示一年，因此應該從1開始到52結束。我嘗試使用hAxis: {maxValue: 52}但它似乎不起作用。 這是我的設置：

<script type="text/javascript">
  google.charts.load('current', {'packages':['line']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Ugenr.');
  data.addColumn('number', 'Anbefalet pris');
  data.addColumn('number', 'Nuværende pris');

  data.addRows([
    [1,  37.8, 41.8],
    [2,  6.6, 32.4],
    [3,  25.4, 25.7],
    [4,  11.7, 10.5],
    [5,  11.9, 6.6],
    [6,   8.8, 7.7],
    [7,   7.6, 9.6],
    [8,  12.3, 10.6],
    [9,  6.6, 14.8],
    [10, 12.8, 11.6],
    [11,  5.3, 4.7],
    [12,  6.6, 5.2],
    [13,  4.8, 3.6],
    [14,  4.2, 3.4],
    [15,  8.8, 31.8],
    [16,  30.9, 6.6],
    [17,  25.4, 25.7],
    [18,  11.7, 10.5],
    [19,  11.9, 10.4],
    [20,   6.6, 7.7],
    [21,   7.6, 9.6],
    [22,  12.3, 10.6],
    [23,  16.9, 14.8],
    [24, 12.8, 11.6],
    [25,  5.3, 4.7],
    [26,  6.6, 5.2],
    [27,  4.8, 3.6],
    [28,  4.2, 6.6],
    [29,  37.8, 41.8],
    [30,  30.9, 32.4],
    [31,  25.4, 25.7],
    [32,  11.7, 10.5],
    [33,  11.9, 10.4],
    [34,   8.8, 7.7],
    [35,   7.6, 9.6],
    [36,  12.3, 10.6],
    [37,  16.9, 14.8],
    [38, 12.8, 11.6],
    [39,  5.3, 4.7],
    [40,  6.6, 5.2],
    [41,  6.6, 3.6],
    [42,  4.2, 6.6],
    [43,  4.2, 3.4],
    [44,  37.8, 41.8],
    [45,  30.9, 32.4],
    [46,  25.4, 25.7],
    [47,  11.7, 10.5],
    [48,  11.9, 6.6],
    [49,   8.8, 7.7],
    [50,   7.6, 9.6],
    [51,  6.6, 10.6],
    [52,  16.9, 14.8]
  ]);

  var options = {
    chart: {
      title: 'Anbefalede og nuværende ugepriser',
      subtitle: 'anbefalede priser = blå, nuværende priser = rød',
        hAxis: {maxValue: 52}  
    },
    legend: { position:'none' },
    height: 500,
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
  };
  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
}

$(window).resize(function(){
  drawChart();
});
</script>

Answer 1

似乎經典圖表的許多選項仍未在材質圖表中實現 ，包括hAxis.minValue 。

一種可能的解決方法是通過在第一列中使用字符串而不是數字來顯式定義自己的標簽。

例如（這里每5周貼上標簽）：

data.addColumn('string', 'Ugenr.');
// ...

// the original data set is unchanged
var dataset = [
  [1,  37.8, 41.8],
  [2,  6.6, 32.4],
  // ...
];

// convert the 1st column to string
dataset = dataset.map(function(r) {
  return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]];
});
data.addRows(dataset);

在此JSFiddle中查看完整的演示。

但是，此版本並不完全令人滿意，因為當您將鼠標放在未定義的點上時，您不會得到星期數。 因此，您可能想要return [r[0] + '', r[1], r[2]]; 而是在map（）回調中。