[英]Google charts pointSize and lineWidth options - do not change Scatter chart
I am using Gooble Material ScatterChart (since I need dual-Y chart).我正在使用 Gooble Material ScatterChart(因为我需要双 Y 图表)。 So I load it with:
所以我加载它:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts.但是现在好像不能设置此类图表的 lineWidth 和 PointSize 选项了。 Seems that it does not affect anything:
似乎它不会影响任何事情:
var options = {
width: 900,
height: 500,
}
What am I doing wrong?我究竟做错了什么? Documentation ( https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options ) says there are these properties for ScatterChart.
文档( https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options )说 ScatterChart 有这些属性。 No refinement is given for Material chart.
没有对材料图表进行细化。 But I do not see any affect and no errors are thrown.
但我没有看到任何影响,也没有抛出任何错误。
Here is the full code of JS function and a piece of HTML.这是JS函数的完整代码和一段HTML。 I have commented out non-Material test portion of code, which is working fine.
我已经注释掉了代码的非材料测试部分,它工作正常。
1 : https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub". 1 : https : //github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html “GitHub 链接”。
Indeed, it seems pointSize
& lineWidth
properties could not be applied to google.charts.Scatter
object.实际上,似乎
pointSize
和lineWidth
属性无法应用于google.charts.Scatter
对象。
But you could consider the following approach for adjusting the chart.但是您可以考虑使用以下方法来调整图表。
As an alternative for pointSize
property,the point size could be specified via CSS:作为
pointSize
属性的替代方案,可以通过 CSS 指定点大小:
#chart_div circle {
r: 3;
}
Regarding lineWidth
property, points could be connected using line
element once the chart is generated as demonstrated below.关于
lineWidth
属性,一旦生成图表,就可以使用line
元素连接点,如下所示。
Complete example完整示例
google.load('visualization', '1.1', { packages: ['scatter'] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var options = { chart: { title: 'Students\\' Final Grades', subtitle: 'based on hours studied' }, width: 900, height: 500, axes: { y: { 'hours studied': { label: 'Hours Studied' }, 'final grade': { label: 'Final Exam Grade' } } }, series: { 0: { axis: 'hours studied' }, 1: { axis: 'final grade' } }, //pointSize: 10, //lineWidth: 1 }; var chart = new google.charts.Scatter(document.getElementById('chart_div')); chart.draw(data, google.charts.Scatter.convertOptions(options)); google.visualization.events.addListener(chart, 'ready', configureChart); } function configureChart() { var chartContainer = document.getElementById('chart_div'); var options = { pointSize: 3, lineWidth: 1 }; drawLines(chartContainer,options); } function drawLines(chartContainer,options) { var points = chartContainer.getElementsByTagName('circle'); var area = {}; for(var i = 0; i < points.length;i++){ if(i > 0){ area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')}; area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')}; if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill')) drawLine(chartContainer,area,points[i].getAttribute('fill'),'1'); } } } function drawLine(chartContainer,area,color,width) { var line = document.createElementNS('http://www.w3.org/2000/svg','line'); line.setAttribute('x1',area.start.x); line.setAttribute('y1',area.start.y); line.setAttribute('x2',area.end.x); line.setAttribute('y2',area.end.y); line.setAttribute('stroke-width',width); line.setAttribute('stroke',color); var svg = chartContainer.getElementsByTagName('svg')[0]; svg.appendChild(line); }
#chart_div circle { r: 3; }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.