谷歌图表柱形图占据整月空间

Question

大家好，我有一个谷歌柱形图，我通过一个月和一年，并格式化轴显示MMM yyyy格式，但在实际图表和网格线谷歌图表插入一个默认的日期为1为此图表并不好看。 我希望整个专栏能够涵盖整整一个月，我不知道如何实现这一目标。

我的代码是

static drawChartIssuesPerMonthForCompany(data) {
    let dataTable = new google.visualization.DataTable();

    dataTable.addColumn("date", "Months");
    dataTable.addColumn("number", "Issue Count");

    data.forEach(row => {
        console.log(data);
        dataTable.addRow([new Date(row.yearId, row.monthId - 1), row.issueCount]);
    });
    let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));

    let options = {
        title: "Monthly issues",
        hAxis: {
            title: "Months",
            gridelines: {
                count: -1
            },
            format: 'MMM yyyy'
        },
        vAxis: {
            gridlines: { color: 'none' },
            minValue: 0,
            title: "Issue Count",
            format: '#',
            maxValue: 4
        }
    };

    chart.draw(dataTable, options);

}

Answer 1

尝试使用"string"作为x轴，而不是"date"

dataTable.addColumn("string", "Months");

请参阅以下工作代码段...

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

function drawChart() {
    let data = [
      {yearId: 2017, monthId: 2, issueCount: 9},
      {yearId: 2017, monthId: 3, issueCount: 2},
      {yearId: 2017, monthId: 4, issueCount: 8}
    ];

    let dataTable = new google.visualization.DataTable();

    dataTable.addColumn("string", "Months");
    dataTable.addColumn("number", "Issue Count");

    let formatDate = new google.visualization.DateFormat({
      pattern: 'MMM yyyy'
    });

    data.forEach(row => {
        dataTable.addRow([formatDate.formatValue(new Date(row.yearId, row.monthId - 1)), row.issueCount]);
    });
    let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));

    let options = {
        title: "Monthly issues",
        hAxis: {
            title: "Months",
            gridelines: {
                count: -1
            }
        },
        vAxis: {
            gridlines: { color: 'none' },
            minValue: 0,
            title: "Issue Count",
            format: '#',
            maxValue: 4
        }
    };

    chart.draw(dataTable, options);
}

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