Google 图表双 x 轴不同刻度

Question

我正在尝试生成一个 Google 具有双 x 轴和不同刻度的图表柱，但没有成功，这是我的代码：

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

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

问题是我需要第二个系列轴在图表顶部，第一个在底部，它应该与 "side" 标签一起使用但不起作用。

Answer 1

您没有创建 Material 条形图，class 必须是 google.charts.Bar 而不是 google.visualization.BarChart。

但是，无论选择哪种图表类型，问题是：您不能同时拥有（自定义刻度和双 x 轴）：

Material BarCharts AFAIK 不支持刻度，非Material BarCharts 不支持双 x 轴。

Google 图表双 x 轴不同刻度

Google Charts dual x-axis different ticks

javascript

charts

google-visualization