javascript - Google图表的pointSize和lineWidth选项-不更改散点图

我正在使用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函数的full code和一段HTML。我已经注释掉了代码的非材料测试部分，该部分工作正常。

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

最佳答案

确实，似乎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>