Google 圖表 pointSize 和 lineWidth 選項 - 不更改散點圖

Question

我正在使用 Gooble Material ScatterChart（因為我需要雙 Y 圖表）。 所以我加載它：

google.load('visualization', '1.1', {packages: ['scatter']});

但是現在好像不能設置此類圖表的 lineWidth 和 PointSize 選項了。 似乎它不會影響任何事情：

      var options = {
        width: 900,
        height: 500,
      }

我究竟做錯了什么？ 文檔（ https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options ）說 ScatterChart 有這些屬性。 沒有對材料圖表進行細化。 但我沒有看到任何影響，也沒有拋出任何錯誤。

這是JS函數的完整代碼和一段HTML。 我已經注釋掉了代碼的非材料測試部分，它工作正常。

1 ： https : //github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html “GitHub 鏈接”。

Answer 1

實際上，似乎pointSize和lineWidth屬性無法應用於google.charts.Scatter對象。

但是您可以考慮使用以下方法來調整圖表。

作為pointSize屬性的替代方案，可以通過 CSS 指定點大小：

#chart_div circle {
   r: 3;
}

關於lineWidth屬性，一旦生成圖表，就可以使用line元素連接點，如下所示。

完整示例

 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>