Javascript 在谷歌图表中添加笔划
我已经创建了一个谷歌面积图,并在下面的屏幕截图中给出了一个5的点大小 有没有一种方法可以在我的点上添加一个笔划,如下图所示。 是的,但这很棘手 执行摘要 只需创建一个脚本来查找在可视化Javascript 在谷歌图表中添加笔划,javascript,google-visualization,Javascript,Google Visualization,我已经创建了一个谷歌面积图,并在下面的屏幕截图中给出了一个5的点大小 有没有一种方法可以在我的点上添加一个笔划,如下图所示。 是的,但这很棘手 执行摘要 只需创建一个脚本来查找在可视化div中创建的svg中的所有元素 对于所有这些圆,找到笔划属性并将其设置为您想要的任何颜色(在您的示例中为000000),然后将笔划宽度属性设置为您想要的任何线宽(对于折线图,谷歌可视化的默认设置为2) 禁用图表交互,使其保持这种状态 详细说明 让我们从一些简单的代码开始: function drawVisuali
div
中创建的svg
中的所有
元素
对于所有这些圆,找到笔划
属性并将其设置为您想要的任何颜色(在您的示例中为000000
),然后将笔划宽度
属性设置为您想要的任何线宽(对于折线图,谷歌可视化的默认设置为2
)
禁用图表交互,使其保持这种状态
详细说明
让我们从一些简单的代码开始:
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Series ID', 'Value'],
['A', 165],
['B', 135],
['C', 157],
['D', 139],
['E', 136]
]);
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
isStacked: true,
width: 600,
height: 400,
pointSize: 10
});
}
这看起来像这样:
<g>
<circle cx="393" cy="152.53" r="8" stroke="#3366cc" stroke-width="1" fill="#ffffff">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>
Google Visualizations在visualizationdiv
元素中使用以下通用代码结构呈现此对象:
<div id="visualization" style="width: 600px; height: 400px; position: relative;">
<div style="position: relative; width: 600px; height: 400px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="600" height="400" style="overflow: hidden;">
<defs id="defs">
<clipPath id="_ABSTRACT_RENDERER_ID_0">
<rect x="115" y="77" width="371" height="247">
</clipPath>
</defs>
<rect x="0" y="0" width="600" height="400" stroke="none" stroke-width="0" fill="#ffffff">
<g>
<rect x="499" y="77" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<rect x="499" y="77" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<text text-anchor="start" x="517" y="88.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Value</text>
</g>
<rect x="499" y="77" width="13" height="13" stroke="none" stroke-width="0" fill="#3366cc">
</g>
</g>
<g>
<rect x="115" y="77" width="371" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g clip-path="url(http://savedbythegoog.appspot.com/retrieve_cache?unique_id=b65582b5691907b9b17033f29fdb4c4bfc18e583#_ABSTRACT_RENDERER_ID_0)">
<g>
<rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="115" y="262" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="115" y="200" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="115" y="139" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="115" y="77" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
</g>
<g>
<g>
<path d="M115.5,323.5L115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22L485.5,323.5L393,323.5L300.5,323.5L208,323.5L115.5,323.5" stroke="none" stroke-width="0" fill-opacity="0.3" fill="#3366cc">
</g>
</g>
<g>
<rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#333333">
</g>
<g>
<path d="M115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none">
</g>
</g>
<g>
<circle cx="115.5" cy="120.55000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="208" cy="157.45" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="300.5" cy="130.39000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="485.5" cy="156.22" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>
<g>
<g>
<text text-anchor="middle" x="115.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">A</text>
</g>
<g>
<text text-anchor="middle" x="208" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">B</text>
</g>
<g>
<text text-anchor="middle" x="300.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">C</text>
</g>
<g>
<text text-anchor="middle" x="393" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">D</text>
</g>
<g>
<text text-anchor="middle" x="485.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">E</text>
</g>
<g>
<text text-anchor="end" x="102" y="328.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">0</text>
</g>
<g>
<text text-anchor="end" x="102" y="266.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">50</text>
</g>
<g>
<text text-anchor="end" x="102" y="205.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">100</text>
</g>
<g>
<text text-anchor="end" x="102" y="143.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">150</text>
</g>
<g>
<text text-anchor="end" x="102" y="82.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">200</text>
</g>
</g>
</g>
<g>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 410px; left: 610px; white-space: nowrap; font-family: Arial; font-size: 13px;">Value</div>
<div></div>
</div>
这张照片显示:
<g>
<circle cx="115.5" cy="120.55000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="208" cy="157.45" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="300.5" cy="130.39000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="485.5" cy="156.22" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>
最简单的方法就是更改“stroke”元素
例如,如果我手动将笔划宽度更改为2(与线宽相同),并将颜色更改为黑色(如您的示例所示),我会得到以下结果:
<g>
<circle cx="115.5" cy="120.55000000000001" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="208" cy="157.45" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="300.5" cy="130.39000000000001" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="393" cy="152.53" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="485.5" cy="156.22" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
</g>
下面是它的外观:
但这种方法存在一些问题。当您将鼠标悬停在图表上时,它会重新绘制SVG元素(因为它会高亮显示单击的任何圆,或者如果单击图例,则高亮显示所有圆),并变成如下所示:
<g>
<circle cx="393" cy="152.53" r="8" stroke="#3366cc" stroke-width="1" fill="#ffffff">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>
所以它只是在它周围重新画了一个更大的圆圈,但这意味着你的花式格式已经消失了
基本上,您需要禁用交互性,或者创建一个脚本,该脚本即使在存在额外的圆圈时也可以运行(因为您不希望两个圆圈的周围都有黑圈,因为这将是一个超大且丑陋的圆圈)
所以我的建议是寻找半径为X的圆(其中X是页面上大多数圆的任意值,与较小的数字成正比),并将所有这些元素存储在一个数组中。然后只需遍历数组,在与图表交互时更改笔划宽度
和笔划颜色
属性
意识到这将变得更加复杂,你的图表变得越来越复杂,因为你正在为所有的圆圈做这件事。如果图表中还有其他圆圈,它们将得到相同的处理,或者搞砸数学。这会很糟糕。这里有一个简单的解决方案。每个点的样式都是以编程方式定义的。这是通过向datatable中添加一个具有“style”角色的列,然后使用简单循环将该样式添加到所有点来完成的。在JSFIDLE上试用:
google.setOnLoadCallback(绘图图);
函数绘图图(){
变量数据数组=[
['X','Y'{
'类型':'字符串',
“角色”:“风格”
}],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
];
对于(i=1;i
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataArray = [
['X', 'Y', {
'type': 'string',
'role': 'style'
}],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
];
for (i = 1; i < dataArray.length; i++) {
dataArray[i].push('point {stroke-width: 2; stroke-color: #e97b2c; fill-color: #eeeeee }');
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
colors: ['#e97b2c'],
pointSize: 8,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}