charts - How to make Google Line Chart circle have border?
问题描述
I wondered if it was possible to make the circle, that appears once hovered across the Google line chart, have a coloured border?
解决方案
您可以使用样式列角色来更改点的样式。
point {stroke-width: 2; stroke-color: red;}
请参阅以下工作片段,
悬停一点以查看样式...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({role: 'style', type: 'string'});
data.addRows([
[0, 1, 'point {stroke-width: 2; stroke-color: red;}'],
[1, 2, 'point {stroke-width: 2; stroke-color: red;}'],
[2, 3, 'point {stroke-width: 2; stroke-color: red;}'],
[3, 4, 'point {stroke-width: 2; stroke-color: red;}'],
[4, 5, 'point {stroke-width: 2; stroke-color: red;}'],
]);
var options = {
legend: 'none'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
推荐阅读
- python - 使用 Tkinter 和 Pillow 放置图像
- reactjs - 如何使用useRoute在app.js中显示当前屏幕名称?
- mysql - 在 MariaDB 中更新 PK
- javascript - 画布未显示在 P5.js 中
- java - java中的ThreadPool有两个队列
- json - 如何使用 Grails 4 JSON 视图呈现域对象的地图
- python - 我的 Heroku 应用在注册时未发送电子邮件
- blazor - 我可以将我的 App blazor 放在 RCL 项目中吗?
- python - 我在 virtualenv 中的 python 脚本因错误“错误解释器:无效参数”而失败
- rust - 如何使用普通引用创建一个简单的父子结构?