charts - 在 Google 图表直方图中更改单个数据项的颜色
问题描述
我正在试验在Google Chart 的网站上找到的代码,还有一个额外的选项可以将桶设置为每个代表 10% 的百分位数:
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
histogram: { bucketSize: rawData.length / 10}
};
但是,从查看文档中,我找不到更改单个数据点颜色的方法,因此该图类似于:
为了实现这一点,是否有使用 Javascript 和/或 Google Charts 公开方法的解决方法?
Pastebin 链接到我的代码(上面详述了更改):https ://pastebin.com/NeGnEwKY
解决方案
没有任何标准选项可用于更改特定块的颜色
但您可以手动更改颜色
'Length'
图表将按值 ( ) 的顺序绘制块
首先,按值对数据进行排序
// sort data by 'Length'
var data = google.visualization.arrayToDataTable(rawData);
data.sort([{column: 1}]);
现在数据表将与<rect>
用于绘制图表的元素 的顺序相同
我们可以getFilteredRows
用来设置要突出显示的行索引
// find data row to highlight
var highlightRows = data.getFilteredRows([{
column: 0,
value: 'Ultrasaurus (ultra lizard)'
}]);
接下来,我们可以使用colors
选项来识别块元素(<rect>
)
然后更改'fill'
属性
但我们必须使用 a MutationObserver
,因为图表将恢复到原始颜色,
只要有活动,例如悬停,或选择...
请参阅以下工作片段...
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var rawData = [
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]
];
// sort data by 'Length'
var data = google.visualization.arrayToDataTable(rawData);
data.sort([{column: 1}]);
// find data row to highlight
var highlightRows = data.getFilteredRows([{
column: 0,
value: 'Ultrasaurus (ultra lizard)'
}]);
var options = {
colors: ['#3366cc', '#dc3912'], // <-- 1st color used to identify, 2nd to highlight
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
histogram: { bucketSize: rawData.length / 10}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Histogram(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var index = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
if (options.colors.indexOf(rect.getAttribute('fill')) > -1) {
if (highlightRows.indexOf(index) > -1) {
rect.setAttribute('fill', options.colors[1]);
}
index++;
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
推荐阅读
- angular - 从字符串到日期设置格式
- html - 从 Jive 响应接收格式错误的 HTML 错误,我该如何继续?
- node.js - Node.js POST 请求在 Postman 中永远挂起
- android - 为什么 FFMPEG 不能在 android 中转换一些 64k 的音频文件?
- stack - Forth 实现使用系统堆栈作为返回堆栈是否可行?
- ruby-on-rails - 无法从 Ruby 的 Alpine docker 映像中启动新的 Rails 项目
- java - 尝试将变量用作参数时出现各种错误
- azure - 用于 Azure Functions 的 ARM 模板,其中包含适用于不同环境和插槽的许多 appSettings
- arrays - hasher.combine(self) 会在使用集合时造成麻烦吗?
- dart - 如果使用泛型的类型相同,如何比较?