javascript - 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) 说散点图有这些属性。没有为 Material 图表提供细化。但我没有看到任何影响，也没有抛出任何错误。

这是 full code一个JS函数和一段HTML。我已经注释掉了代码的非 Material 测试部分，它工作正常。

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>