x 轴上的重复标签，堆叠条形图（google 个图表）

Question

我正在尝试使用 Google 图表创建堆叠条形图。数据是动态的，所以在制作图表之前我无法说出轴的值。我的问题是 x 轴有时会填充不必要的标签，如所附屏幕截图所示（在这个特定场景中，我只有 4 组数据，因此第二个名为“12”的标签实际上不应该存在）。

关于如何解决这个问题以及如何将列对齐到各自标签的正上方有什么建议吗？

根据要求，这是一些代码。一直在尝试不同的选项，但没有成功。

  var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Alfa');
        data.addColumn('number', 'Bravo');
        data.addColumn('number', 'Charlie');
        data.addColumn('number', 'Delta');
        data.addColumn('number', 'Echo');
        data.addColumn('number', 'Foxtrot');

        data.addRows(myDataSet);

        var options = {
            width: 1000,
            height: 563,
            series: {
                0: { color: '#F7464A' }, //Alfa
                1: { color: '#46BFBD' }, //Bravo
                2: { color: '#FDB45C' }, //Charlie
                3: { color: '#0971B2' }, //Delta
                4: { color: '#ab7967' }, //Echo
                5: { color: '#a3be8c' }  //Foxtrot
            },
            bar: { groupWidth: '75%' },
            isStacked: true,
            title: title,
            hAxis: {
                title: 'Week',
                format: '0'
            },
            vAxis: {
                title: 'Tasks'
            }
        };

        var chart = new google.visualization.ColumnChart(
            document.getElementById('velocityBarChartDiv'));

        chart.draw(data, options);
        $("#velocityBarChartDiv").show();

Answer 1

在没有样本数据和 fiddle/plunker playground 的情况下将这些拼凑起来有点像在黑暗中尝试，但我认为你想要关注的关键点是改变你的 DataTable 到 arrayToDataTable。此外，浏览文档时，您的设置可能会有点误入歧途。这是我的示例数据设置

var data = new google.visualization.arrayToDataTable(
[
    ['X', 'Alfa', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot'],
    ['10', 10, 24, 20, 32, 18, 5],
    ['11', 16, 22, 23, 30, 16, 9],
    ['12', 28, 19, 29, 30, 12, 13],
    ['13', 28, 19, 29, 30, 12, 13]
]);

这有点棘手，但似乎第一个数组将是您的类别，并且每行中的 第一个 值将与 x 轴标签相关。如果我们忽略那些第一个字符串值并替换为数值，我也会遇到您使用 "doubled" 值获得的移动 x 轴。

总之，我把这里的东西做了一个fiddle，我想最终的结果就是你要找的

x 轴上的重复标签，堆叠条形图（google 个图表）

Duplicate label on x-axis, stacking bar chart (google charts)

html

javascript

charts

google-visualization

JSFiddle Link