x轴上的标签重复，堆叠条形图（Google图表） [英] Duplicate label on x-axis, stacking bar chart (google charts)

问题描述

我正在尝试使用Google图表创建堆积条形图。数据是动态的，因此在绘制图表之前，我将无法说出轴的值。我的问题是，x轴有时会填充不必要的标签，如所附的屏幕截图所示（在这种情况下，我只有4组数据，因此第二个标签名为 12的标签实际上不应存在）。

I'm trying to create a stacking bar chart with Google Charts. The data is dynamic, so i wont be able to tell the values of the axises until the chart is made. My problem is that the x-axis sometimes fills in unnecessary labels, as shown in the attached screenshot (In this particular scenario i only have 4 sets of data, so the second label named '12' shouldn't really be there).

关于如何解决此问题的任何建议，也可以将列对齐在其各自标签的正上方吗？

Any suggestions to how i can fix this, and also align the columns right above their respective labels?

以下是一些代码，例如要求。

Here's some of the code, as requested. Been trying different variations in the options, without much success.

  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();

推荐答案

这些都没有示例数据，也没有小提琴/吉他演奏家，但我想您要重点关注的是将 DataTable 更改为 arrayToDataTable 。另外，浏览文档时，您可能对设置有些误解。这是我的示例数据设置

It was kind of a shot in the dark to piece this together without sample data nor fiddle/plunker playground, but I think the key point you'd like to focus on here is to change your DataTable to arrayToDataTable. Also, browsing through the docs, you may be slightly astray with your setup. Here is my example data setup

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]
]);

这有点棘手，但似乎第一个数组将是您的类别，并且每行中的 first 值将与x轴标签相关。如果我们忽略那些第一个字符串值并替换为数字值，那么我还会遇到双值时获得的移位x轴的问题。

It was kind of tricky, but it appears as if the first array will be your categories, and the first value in each row will relate to the x axis label. If we ignore those first string values and substitute numeric values, I also experience the shifty x axis you are getting with the "doubled" values.

无论如何，我还是拿了在这里，制作了一个小提琴，我认为最终结果就是您要搜索的

Anyways, I took what was here, crafted a fiddle, and I think the end result is what you are searching for

这篇关于x轴上的标签重复，堆叠条形图（Google图表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！