【问题标题】:Defining attributes for two y axes in google column charts在谷歌柱形图中定义两个 y 轴的属性
【发布时间】:2014-08-05 09:32:54
【问题描述】:

我正在寻找一种在谷歌柱形图中定义两个不同 y 轴的方法。我已经在这里找到了一些帮助:Can Google Charts support dual y-axis (v-axis)? 和其他各种帖子

我设法在图表中获得了两个轴,并且可以将数据正确地对齐到不同的轴。

我现在的问题是我似乎无法赋予两个 y 轴不同的属性。我写进刹车的所有东西似乎都被谷歌图表忽略了。如果我为两个轴设置属性,它可以工作 - 但我想要两个不同的标题......

我的代码中好像遗漏了一些重要的东西

这是我想要做的代码:

function drawChart002() {
// grab the CSV
   jQuery.get("csv/compare_time_percent.csv", function(csvString) {

      // transform the CSV string into a 2-dimensional array
      var arrayData = jQuery.csv.toArrays(csvString, {onParseValue: jQuery.csv.hooks.castToScalar});

         for(var i=1; i< arrayData.length; i++){
        var row = arrayData[i];
        for(var j=0; j< row.length; j++){
            var el = row[j];
            if(j == 0){
                row[j] = new Date(el);
            }
        }
    }

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      // this view can select a subset of the data at a time
      var view = new google.visualization.DataView(data, true);
     // view.setColumns([0,1]);

     // set chart options
     var options = {
        title: "",

        series:{0: {targetAxisIndex:0},
                1: {targetAxisIndex:1},
                2: {targetAxisIndex:1}
        },

        hAxis: {title: data.getColumnLabel(0)},
        vAxis: {0: { title: 'Unterschied in Prozent'},
                1: { title: 'Temperatur in Celsius', viewWindow: {min: -20, max: 20}}
        },



        curveType: 'function',
        legend:  { position: 'bottom' },
     };

     // create the chart object and draw it
     var chart_div = document.getElementById('div_002');
     var chart = new google.visualization.ColumnChart(document.getElementById('div_002'));

     var chart_div_print = document.getElementById('div_002_link');
     var chart_print = new google.visualization.ColumnChart(document.getElementById('div_002_link'));

     // wait for the chart to finish drawing before calling the getImageURI() methode
     google.visualization.events.addListener(chart, 'ready', function () {
     chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
     document.getElementById('div_002_link').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
     console.log(div_002);
     });

     chart.draw(view, options);
  });
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart002);

但谷歌图表不使用标题而不是为两个轴打印任何标题,他也忽略了 viewWindow 选项

我希望我的问题很清楚,你可以帮助我找到我的错误并帮助我解决我的问题

【问题讨论】:

    标签: google-visualization


    【解决方案1】:

    你使用的是vAxis,应该是vAxes

    vAxes: {0: { title: 'Unterschied in Prozent'},
                1: { title: 'Temperatur in Celsius', viewWindow: {min: -20, max: 20}}
        },
    

    【讨论】:

    • 非常感谢!我知道我错过了一些小东西 :) 现在可以完美运行了 :)
    • 没问题!祝你的项目好运
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-15
    • 2016-05-02
    相关资源
    最近更新 更多