Question

我试图生成一个双x轴和不同刻度但没有运气的Google图表条形图，这是我的代码：

＆＃13;

google.load('visualization', '1.1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawRightY);

function drawRightY() {
    var data = google.visualization.arrayToDataTable([
        ['City', '2010', '2000'],
        ['NY', 81, 80],
        ['CA', 37, 36],
        ['IL', 26, 28],
        ['TX', 20, 19],
        ['PA', 15, 15]
    ]);
    var options = {
        chartArea: {
            width: '100%'
        },
        hAxes: {
            0: {
                viewWindow: {
                    max: 100,
                    min: 0
                },
                ticks: [{
                    f: 'A1',
                    v: '3.3'
                }, {
                    f: 'A2',
                    v: '10'
                }, {
                    f: 'A3',
                    v: '16.7'
                }, {
                    f: 'A4',
                    v: '23.3'
                }, {
                    f: 'A5',
                    v: '30'
                }, {
                    f: 'A6',
                    v: '36.7'
                }, {
                    f: 'A7',
                    v: '43.4'
                }, {
                    f: 'A8',
                    v: '50'
                }, {
                    f: 'A9',
                    v: '56.7'
                }, {
                    f: 'A10',
                    v: '63.4'
                }, {
                    f: 'A11',
                    v: '70'
                }, {
                    f: 'A12',
                    v: '76.7'
                }, {
                    f: 'A13',
                    v: '83.4'
                }, {
                    f: 'A14',
                    v: '90'
                }, {
                    f: 'A15',
                    v: '96.7'
                }]
            },
            1: {
                side: 'top',
                viewWindow: {
                    max: 100,
                    min: 0
                },
                ticks: [10, 30, 50, 70, 90]
            }
        },
        series: {
            0: {
                targetAxisIndex: 0
            },
            1: {
                targetAxisIndex: 1
            }
        },
        bars: 'horizontal', // Required for Material Bar Charts.
        colors: ['#FFB74D', '#FFE0B2'],
        bar: {
            groupWidth: "80%"
        },
        legend: {
            position: 'none'
        }
    };
    var chart = new google.visualization.BarChart(document.getElementById('barchart'));
    chart.draw(data, options);
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="barchart"></div>

＆＃13;

问题是我需要第二个系列轴位于图表的顶部，而第一个系列轴位于底部，它应该与＆＃34; side＆＃34;标签但不起作用。

Answer 1

您没有创建材料条形图，该类必须是google.charts.Bar而不是google.visualization.BarChart。

然而，问题，无论选择的图表类型如何：你不能同时拥有（自定义刻度和双x轴）：

材料BarCharts AFAIK不支持刻度线，非材料BarCharts不支持双x轴。

Google Charts双x轴不同刻度

1 个答案: