Question

问题在于，即使具有值和刻度，最后一个日期也不会显示为刻度。

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          [
            ["Month Day", "New User"],
            [new Date(2020, 9, 1), 4064],
            [new Date(2020, 9, 2), 3415],
            [new Date(2020, 9, 3), 2071],
            [new Date(2020, 9, 4), 397],
            [new Date(2020, 9, 5), 1425],
            [new Date(2020, 9, 6), 4848],
            [new Date(2020, 9, 7), 667]
          ]);

        var options = {
          vAxis: {
            gridlines: {
              color: "transparent"
            },
            format: "#,###",
            baseline: 0,
          },
          hAxis: {
            format: "dd MMM",
            gridlines: {
              color: "transparent"
            },
            "ticks": [
              new Date(2020, 9, 1),
              new Date(2020, 9, 2),
              new Date(2020, 9, 3),
              new Date(2020, 9, 4),
              new Date(2020, 9, 5),
              new Date(2020, 9, 6),
              new Date(2020, 9, 7)
            ]
          },
          height: 300,
          legend: "none",
          chartArea: {
            height: "85%",
            width: "92%",
            bottom: "11%",
            left: "10%"
          },
          colors: ["#85C1E9"],

        };

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

如果我添加额外的刻度日期，则图表上看起来很奇怪。

有什么方法可以在图表xAxis上显示最后的报价日期？

https://jsfiddle.net/hu3wm0jn/

Answer 1

只需要在图表的右侧留出足够的空间以显示标签

查看更新的chartArea选项...

chartArea: {
  left: 64,
  top: 48,
  right: 48,
  bottom: 64,
  height: '100%',
  width: '100%'
},
height: '100%',
width: '100%',

请参阅以下工作摘要...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Month Day", "New User"],
    [new Date(2020, 9, 1), 4064],
    [new Date(2020, 9, 2), 3415],
    [new Date(2020, 9, 3), 2071],
    [new Date(2020, 9, 4), 397],
    [new Date(2020, 9, 5), 1425],
    [new Date(2020, 9, 6), 4848],
    [new Date(2020, 9, 7), 667]
  ]);

  var options = {
    vAxis: {
      gridlines: {
        color: "transparent"
      },
      format: "#,###",
      baseline: 0,
    },
    hAxis: {
      format: "dd MMM",
      gridlines: {
        color: "transparent"
      },
      ticks: [
        new Date(2020, 9, 1),
        new Date(2020, 9, 2),
        new Date(2020, 9, 3),
        new Date(2020, 9, 4),
        new Date(2020, 9, 5),
        new Date(2020, 9, 6),
        new Date(2020, 9, 7)
      ]
    },
    legend: "none",
    chartArea: {
      left: 64,
      top: 48,
      right: 48,
      bottom: 64,
      height: '100%',
      width: '100%'
    },
    height: '100%',
    width: '100%',
    colors: ["#85C1E9"]
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  min-height: 500px;
  height: 100%;
}

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

Google聊天未在图表上显示最后一个刻度

1 个答案: