Есть ли способ использовать API Google Chart Javascript для центрирования столбцов на гистограмме, подобной этой - Пример диаграммы Google? Я хотел бы сымитировать график воронки с Google Charts. Google Charts не поддерживает график с воронкой.
Центрированные столбцы на диаграмме Google Chart BarChart?
Ответы (1)
Да, это возможно. В основном то, что они делают в этом примере, - это создание простой гистограммы (http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html). Чтобы получить эффект «воронки», они создают диаграмму с накоплением (в javascript см. Свойство isStacked). Первый элемент они окрашены в белый цвет, а следующий элемент в этом примере - оранжевый.
Вы можете убедиться в этом сами, изменив свойство цвета: chco = ffffff, FF9900, например, на chco = aaaaaa, FF9900.
http://chart.apis.google.com/chart?cht=bhs&chco=aaaaaa,FF9900&chxt=x,x,y&chxl=1:|Percentage%20converting|2:|Step%206|Step%205|Step%204|Step%203|Step%202|Step%201&chxp=1,50|3,50&chd=t:0,12.5,28,29,35.5,48.5|100,75,44,42,29,3&chbh=a&chs=800x230&chm=N **%, 000000,1, -1,11,, c & chds = 0,100
Тогда вы увидите, что это простая диаграмма с накоплением, а не совсем новый вид графика.
Следующий код показывает, как это сделать:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Invisible', 10, 20, 30, 40],
['Visible', 80, 60, 40, 20]];
var years = ["Step1", "Step2", "Step3", "Step4"];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(years.length);
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
colors: ['ffffff','aaaaaa'],
vAxis: {title: "Year"},
hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true}
);
}