谷歌图表：全球点笔画颜色 [英] Google Charts: global point stroke-color
问题描述
'point {size：18;笔画颜色：＃F00; }'
但是没有任何变化似乎允许这样的全局配置：
pointStrokeColor：'＃F00'，
style：'point {stroke-color：＃F00; }'，
point：{strokeColor：'＃F00'，stroke：{color：'＃F00'}}
google.charts.load（'current'，{'packages'：['corechart']}）; google.charts.setOnLoadCallback（drawChart）;函数drawChart（）{var data = google.visualization.arrayToDataTable（[['X'，'Y'，{'type'：'string'，'role'：'style'} ]，[1，6，null]，[2，5，'point {size：18; stroke-color：＃F00;}']，[3，4，null]]）; var options = {curveType：'function'，pointSize：10，pointStrokeColor：'＃F00'，style：'point {stroke-color：＃F00; }'，point：{strokeColor：'＃F00'，stroke：{color：'＃F00'}}}; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（data，options）;}
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_divstyle =width：900px; height ：500px;>< / div>
上面的代码片段试图声明所有的点应该在一个全局配置中有一个红色边框。
这个答案很好，但是这两个选项要么配置每个点，要么使用CSS- CSS本地不适用于我。
改变点的笔触颜色的唯一标准方法是使用 'style'栏目角色
列角色必须在每个点上设置
您可以使用 DataView class 在所有行上设置样式
var view = new google.visualization.DataView（data） ;
view.setColumns（[0，1，{
calc：function（dt，row）{
return'point {stroke-color：＃F00;}';
} ，
角色：'style'，
类型：'string'
}]）;
请参阅以下工作片段...
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div> / code>
通过列角色应用不会影响图例标记
$（'circle'）。attr（'stroke'，'＃ff0000'）;
$（'circle'）。attr（'stroke-width'，'1'）;
不过，图表会将点数更改回其默认样式，
任何时候都有交互性，比如点悬停
，因此需要使用 MutationObserver 来了解何时交互性已发生，
请参阅以下工作片段...
google.charts.load（'current'，{callback：drawChart，packages：['corechart']}）; function drawChart（）{var data = google.visualization.arrayToDataTable（[[' X'，'Y']，[1,6]，[2,5]，[3,4]]）; var options = {curveType：'function'，pointSize：10}; var container = document.getElementById（'chart_div'）; var chart = new google.visualization.LineChart（container）; var observer = new MutationObserver（function（mutations）{$（'circle'）。attr（'stroke'，'＃ff0000'）; $（'circle'）。attr（'stroke-width'，'1'）; }）; observer.observe（容器，{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>
Attempting to set a global stroke color in chartkick.
'point { size: 18; stroke-color: #F00; }'
but no variation seems to allow global config of this:
pointStrokeColor: '#F00',
style: 'point { stroke-color: #F00; }',
point: {strokeColor: '#F00', stroke: {color: '#F00'}}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X', 'Y', {'type': 'string', 'role': 'style'}],
[1, 6, null],
[2, 5, 'point { size: 18; stroke-color: #F00; }'],
[3, 4, null]
]);
var options = {
curveType: 'function',
pointSize: 10,
pointStrokeColor: '#F00',
style: 'point { stroke-color: #F00; }',
point: {strokeColor: '#F00', stroke: {color: '#F00'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
So in the above snippet, trying to declare that all the points should have a red border from one global config.
This answer is great but the two options are either configure every point, or use CSS - the CSS is not working for me locally.
the only standard way to change the stroke color of a point is to use a 'style' column role
column roles must be set on each point
you could use the DataView class to set the style on all the rows
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return 'point {stroke-color: #F00;}';
},
role: 'style',
type: 'string'
}]);
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 6],
[2, 5],
[3, 4]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return 'point {stroke-color: #F00;}';
},
role: 'style',
type: 'string'
}]);
var options = {
curveType: 'function',
pointSize: 10
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// use view to draw chart
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: styles applied through a column role do not affect legend markers
css would correct, the only other option would be to use jquery
$('circle').attr('stroke', '#ff0000');
$('circle').attr('stroke-width', '1');
however, the chart will change the points back to their default styles,
anytime there is interactivity, such as on point hover
as such, would need to use a MutationObserver to know when interactivity has occurred,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 6],
[2, 5],
[3, 4]
]);
var options = {
curveType: 'function',
pointSize: 10
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
var observer = new MutationObserver(function (mutations) {
$('circle').attr('stroke', '#ff0000');
$('circle').attr('stroke-width', '1');
});
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>
这篇关于谷歌图表：全球点笔画颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
