0
A
回答
0
不认为这会改变风格
也不是这个图表
上可用的样式列的角色,但你可以尝试改变风格的手工
$.each($('rect[fill="#3366cc"]'), function (index, bar) {
$(bar).attr('stroke', '#ffffff');
$(bar).attr('stroke-width', '3');
});
任何配置选项
a MutationObserver
用于防止图表恢复为其原始样式,
任何时候都有激活知音如悬停
看到下面的工作片段...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['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]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
height: 400,
colors: ['#29b6f6']
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Histogram(container);
var observer = new MutationObserver(function() {
$.each($('rect[fill="#29b6f6"]'), function (index, bar) {
// change stroke
$(bar).attr('stroke', '#ffffff');
$(bar).attr('stroke-width', '4');
// round corners
$(bar).attr('rx', '6');
$(bar).attr('ry', '6');
});
});
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
相关问题
- 1. 如何自定义Google图表日历?
- 2. 如何自定义Google图表
- 3. 如何自定义Google barchart_material图表?
- 4. 自定义Google图表
- 5. 如何在Google图表上绘制垂直线到直方图?
- 6. Google表格自定义标准图表
- 7. 绘制自定义直方图打破
- 8. 用highcharts.js构建自定义直方图
- 9. 使用CSS自定义Google图表
- 10. 自定义Google图表列过滤器
- 11. 自定义Google地图
- 12. 如何自定义Google图表中特定点的颜色
- 13. Google地图自定义图像和自定义坐标
- 14. 自定义Google地图标记图标
- 15. 自定义Google地图API“图标”InfoWindows
- 16. 静态Google地图自定义图标
- 17. Android Google地图自定义视图
- 18. 如何创建像自定义列表视图的自定义图像视图?
- 19. 如何在Google图表中创建自定义hAxis标签?
- 20. 如何为Google Charts的TermCloud图表提供自定义颜色?
- 21. 自定义图表
- 22. 图像直方图含义
- 23. 如何将自定义标记图标添加到Google地图?
- 24. 如何自定义Google地图标记图标?
- 25. 如何在Google地图中创建自定义地图?
- 26. 将自定义图像用作地图(如Google地图)
- 27. 自定义列表视图自定义列表视图Android
- 28. 如何自定义对角图表
- 29. 如何自定义列表视图行
- 30. 如何自定义jzy3d图表
非常感谢!这正是我一直在寻找的!不幸的是,我的评价太低,无法评价你的答案! –