更改 Google 可视化图表中特定标签的字体和粗细
change the font and weight of a specific label in Google Visualization Charts
我有一张 Google 图表。例如(来自 Google 文档):
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
我想更改其中一个图例的字体和粗细,比如 Sales
。我不知道该怎么做。有没有简单的方法?
没有开箱即用的选项来更改特定标签。
对于每种类型的标签,都有一个 textStyle
选项。
但同样,这将更改该类型的所有标签。
例如,要更改所有图例标签,请使用 --> legend.textStyle
legend: {
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
但是,我们可以手动更改图表,一旦它完成绘制,
在 'ready'
活动期间。
请参阅以下工作代码段,在这里,我们找到了图表中使用的标签,
将它们与数据 table、
中的列标题进行比较
如果找到,我们会根据列索引更改样式...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom',
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
// listen for ready event, must be assigned before calling draw
google.visualization.events.addListener(chart, 'ready', function () {
// get text elements from chart
var labels = chart.getContainer().getElementsByTagName('text');
// loop chart labels
Array.prototype.forEach.call(labels, function(label) {
// loop data table columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
// determine if label matches legend entry
if (label.textContent === data.getColumnLabel(i)) {
// determine column index
switch (i) {
// first series
case 1:
label.setAttribute('fill', 'magenta');
label.setAttribute('font-size', '24');
label.setAttribute('font-weight', 'normal');
break;
// second series
case 2:
label.setAttribute('fill', 'lime');
label.setAttribute('font-size', '12');
break;
}
}
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
我有一张 Google 图表。例如(来自 Google 文档):
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
我想更改其中一个图例的字体和粗细,比如 Sales
。我不知道该怎么做。有没有简单的方法?
没有开箱即用的选项来更改特定标签。
对于每种类型的标签,都有一个 textStyle
选项。
但同样,这将更改该类型的所有标签。
例如,要更改所有图例标签,请使用 --> legend.textStyle
legend: {
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
但是,我们可以手动更改图表,一旦它完成绘制,
在 'ready'
活动期间。
请参阅以下工作代码段,在这里,我们找到了图表中使用的标签,
将它们与数据 table、
中的列标题进行比较
如果找到,我们会根据列索引更改样式...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom',
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
// listen for ready event, must be assigned before calling draw
google.visualization.events.addListener(chart, 'ready', function () {
// get text elements from chart
var labels = chart.getContainer().getElementsByTagName('text');
// loop chart labels
Array.prototype.forEach.call(labels, function(label) {
// loop data table columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
// determine if label matches legend entry
if (label.textContent === data.getColumnLabel(i)) {
// determine column index
switch (i) {
// first series
case 1:
label.setAttribute('fill', 'magenta');
label.setAttribute('font-size', '24');
label.setAttribute('font-weight', 'normal');
break;
// second series
case 2:
label.setAttribute('fill', 'lime');
label.setAttribute('font-size', '12');
break;
}
}
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>