javascript - Google Chart 柱形图占据整个月的空间

Question

我有一个谷歌柱形图，我在一个月和一年内传递了它，并将轴格式化为以 MMM yyyy 格式显示它。但在实际图表和网格线上，Google 图表插入了默认日期 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>