我有一堆产品,我使用ColumnChart在x轴上显示产品名称,然后在y轴上显示产品的两个不同值。由于有很多产品,如果我在ColumnChart上一次显示所有产品,它会变得非常混乱,因此我使用ChartRangeFilter控件来获得产品窗口。
现在我的问题是ChartRangeFilter不能在轴上使用字符串。但是我不想在x轴上显示产品ID,所以可以在显示时更改标签吗? 希望你能明白我的意思。以下是一些要在google code playground
中测试的代码<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0, 1, 2]
},
'minRangeSize': 1
}
},
// Initial range: 1 to 4.
'state': {'range': {'start': 1, 'end': 4}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
'legend': {'position': 'none'}
}
});
var data = new google.visualization.DataTable();
data.addColumn('number', 'Product ID');
data.addColumn('number', 'value1');
data.addColumn('number', 'valu2');
data.addRow([1, 11, 12]);
data.addRow([2, 15, 12]);
data.addRow([3, 10, 11]);
data.addRow([4, 11, 9]);
data.addRow([5, 8, 12]);
data.addRow([6, 4, 9]);
data.addRow([7, 8, 15]);
data.addRow([8, 8, 11]);
data.addRow([9, 8, 9]);
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</body>
</html>
提前致谢!
答案 0 :(得分:1)
您可以使用DataView来解决此问题。在ControlWrapper中,像这样设置view.columns参数:
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0, 1, 2]
},
'minRangeSize': 1
}
},
// Initial range: 1 to 4.
'state': {'range': {'start': 1, 'end': 4}},
view: {
columns: [{
type: 'number',
calc: function (dt, row) {
return {v: row, f: dt.getFormattedValue(row, 0)};
}
}, 1, 2]
}
});
然后在ChartWrapper的view.columns中反转该过程:
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
'legend': {'position': 'none'}
},
view: {
columns: [{
type: 'string',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
}
}, 1, 2]
}
});
那应该能得到你想要的东西。
此代码假定您有一个包含3列的DataTable:字符串(产品名称)和两个数字列(value1和value2)。这是一个演示:http://jsfiddle.net/asgallant/55agF/
答案 1 :(得分:0)
更改背景文本的颜色
hAxis: {textStyle: {color: 'white'}},