【发布时间】: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 选项
我希望我的问题很清楚,你可以帮助我找到我的错误并帮助我解决我的问题
【问题讨论】: