【问题标题】:Google Charts API - chart with two yAxis - like the one from Google SheetsGoogle Charts API - 带有两个 yAxis 的图表 - 就像来自 Google Sheets 的图表
【发布时间】:2013-12-18 08:35:11
【问题描述】:

我做了相当大的研究,我不敢相信 使用当前版本的 Google Charts API 我无法制作像 Google Sheets 中那样的图表 - https://support.google.com/drive/answer/2451203?hl=en with 2 个具有独立值的 yAxis 和一个公共 xAxis。

*更新:到目前为止,我设法制作了条形图和折线图。我需要完全相同的东西,但现在左侧的 vAxis 的值从 1 到 5。我需要 右侧的附加 vAxis 的值从 0 到 2(目前,“STD”还有一个额外的 xAxis ",但它的值不是 0 到 2,而是 1 到 5)

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Cups', 'STD'],
        ['2.2',  4.1,      1.5],
        ['2.3',  2.1,      1],
        ['2.4',  3,      1.4],
        ['2.6',  2,      1.2],
        ['2.7',  2,      1.3],
        ['2.1',  1.1,      1.7]
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      hAxis: {title: "Month"},
      vAxis: {
        title: "Cups",
        gridlines: {
            count: 5
        },
        baseline: 1,
        format: "#"
    },
      seriesType: "bars",
      series: {1: {type: "line"}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    chart.draw(data, options);
}

【问题讨论】:

标签: charts


【解决方案1】:

问题解决了!

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'AVRG', 'STD'],
        ['Item 1',  4.1,      1.5],
        ['Item 2',  2.1,      1.1],
        ['Item 3',  3,      0.7],
        ['Item 4',  2,      1.5],
        ['Item 5',  2,      1.7],
        ['Item 6',  1.1,      0.3]
    ]);

    var options = {
    title : 'Title',
    hAxis: {title: "Month"},
    vAxes:[
        {
            title: "AVRG",
            gridlines: {
                count: 5
            },
            baseline: 1,
            format: "#"
        },
        {
            title: "STD",
            gridlines: {
                count: 2
            },
            baseline: 0,
            format: "#"
        }
    ],
    series:[
        {targetAxisIndex:0},
        {targetAxisIndex:1, type: "line"}
    ],
    seriesType: "bars"
    };

    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    chart.draw(data, options);
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-10-04
    • 1970-01-01
    • 2015-08-30
    • 1970-01-01
    • 1970-01-01
    • 2017-09-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多