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 barchart_material图表?
- 3. 自定义Google图表
- 4. Google表格自定义标准图表
- 5. 绘制自定义直方图打破
- 6. 自定义Google图表列过滤器
- 7. 使用CSS自定义Google图表
- 8. 如何自定义Google图表中特定点的颜色
- 9. 静态Google地图自定义图标
- 10. 自定义Google地图API“图标”InfoWindows
- 11. 自定义图表
- 12. 如何自定义Google地图标记图标?
- 13. 如何将自定义标记图标添加到Google地图?
- 14. 如何自定义表格视图?
- 15. 如何自定义列表视图行
- 16. 如何设置图表js自定义
- 17. 如何自定义jzy3d图表
- 18. Highcharts方块图自定义
- 19. 在自定义Google地图上显示自己的地方
- 20. 自动完成Google地图V3无法自定义的地方?
- 21. 如何在Google自定义搜索中指定图片类型
- 22. 自定义Google地图的示例
- 23. 自定义Google地图叠加?
- 24. CSS Google地图自定义InfoWindow
- 25. 创建自定义Google(或OpenLayers?)地图
- 26. Google地图自定义对象
- 27. Impresspages 4 Google地图自定义样式
- 28. Google地图自定义投影
- 29. 自定义Google地图标记HTML
- 30. react-google-maps自定义标记图标
非常感谢!这正是我一直在寻找的!不幸的是,我的评价太低,无法评价你的答案! –