这是我的图表示例:
google.charts.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''],
[0.85, 165, 938, 522, 998, null, null, null, null, 614.6, 500],
[1.15, null, null, null, null, 165, 938, 522, 998, 614.6, 510],
[1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],
[1.85, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[2.15, null, null, null, null, 165, 938, 522, 998, 682, 540],
[2.5, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[2.85, null, null, null, null, 165, 938, 522, 998, 682, 540]
]);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
},
title : 'Chart',
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
hAxis: {
ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
},
seriesType: 'bars',
bar: { groupWidth: 1000 },
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart_div',
options: {
title : 'Chart',
width: 600,
chartArea: {
width: '80%'
},
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
seriesType: 'bars',
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
}
});
function setOptions (wrapper) {
// sets the options on the chart wrapper so that it draws correctly
wrapper.setOption('height', 400);
wrapper.setOption('width', 600);
wrapper.setOption('chartArea.width', '80%');
// the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter
wrapper.setOption('animation.duration', 0);
}
setOptions(chart);
dash.bind([control], [chart]);
dash.draw(data);
是否可以为每个刻度定义自定义 x 轴标签文本，例如将 1.0 显示为“foo”、1.5 - 空、2.0 - “bar”等。问题是我在使用 ChartRangeFilter 时不能使用字符串类型的值。
最佳答案
您可以在ticks 选项中使用对象表示法
提供一个值 (v:) 和一个格式化值 (f:)
ticks.push({
v: 1.0,
f: 'foo'
});
在这个例子中，格式化的值被添加到DataTable
然后添加到 ticks 数组
google.charts.load('current', {
callback: function () {
var origTicks = [{v: 1, f: '00:00'}, {v: 2, f: '01:00'}, {v: 3, f: '02:00'}, {v: 4, f: '03:00'}, {v: 5, f: '04:00'}, {v: 6, f: '05:00'}, {v: 7, f: '06:00'}, {v: 8, f: '07:00'}, {v: 9, f: '08:00'}, {v: 10, f: '09:00'}, {v: 11, f: '10:00'}, {v: 12, f: '11:00'}, {v: 13, f: '12:00'}, {v: 14, f: '13:00'}, {v: 15, f: '14:00'}, {v: 16, f: '15:00'}, {v: 17, f: '16:00'}, {v: 18, f: '17:00'}, {v: 19, f: '18:00'}, {v: 20, f: '19:00'}, {v: 21, f: '20:00'}, {v: 22, f: '21:00'}, {v: 23, f: '22:00'}, {v: 24, f: '23:00'}];
var data = google.visualization.arrayToDataTable([
['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''],
[{v: 0.85, f: 'foo'}, 165, 938, 522, 998, null, null, null, null, 614.6, 500],
[{v: 1.15, f: 'bar'}, null, null, null, null, 165, 938, 522, 998, 614.6, 510],
[{v: 1.5, f: ''}, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],
[{v: 1.85, f: 'foo2'}, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[{v: 2.15, f: 'bar2'}, null, null, null, null, 165, 938, 522, 998, 682, 540],
[{v: 2.5, f: ''}, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[{v: 2.85, f: 'foo3'}, null, null, null, null, 165, 938, 522, 998, 682, 540]
]);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
},
title : 'Chart',
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
hAxis: {
ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
},
seriesType: 'bars',
bar: { groupWidth: 1000 },
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart_div',
options: {
title : 'Chart',
width: 600,
chartArea: {
width: '80%'
},
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
seriesType: 'bars',
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
}
});
google.visualization.events.addListener(control, 'statechange', function () {
google.visualization.events.addOneTimeListener(chart, 'ready', setTicks);
});
google.visualization.events.addOneTimeListener(chart, 'ready', setTicks);
function setTicks() {
var ticks = [];
for (var i = 0; i < origTicks.length; i++) {
if ((origTicks[i].v >= control.getState().range.start) && (origTicks[i].v <= control.getState().range.end)) {
ticks.push(origTicks[i]);
}
}
chart.setOption('hAxis.ticks', ticks);
chart.draw();
}
function setOptions (wrapper) {
// sets the options on the chart wrapper so that it draws correctly
wrapper.setOption('height', 400);
wrapper.setOption('width', 600);
wrapper.setOption('chartArea.width', '80%');
// the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter
wrapper.setOption('animation.duration', 0);
}
setOptions(chart);
dash.bind([control], [chart]);
dash.draw(data);
},
packages:['controls', 'corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="control_div"></div>关于javascript - 谷歌图表 x 轴标签文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37655450/