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

问题

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

回答1:

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

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

JSFiddle Link

来源：https://stackoverflow.com/questions/29283887/duplicate-label-on-x-axis-stacking-bar-chart-google-charts

标签

javascript

html

charts

google-visualization