Google Charts中pointShape、lineWidth等属性无法生效，寻求解决方案

问题原因 #

• 你使用的是Material版本折线图（google.charts.Line），该版本对lineWidth、lineDashStyle、pointShape等样式属性支持有限，导致配置不生效。
• 配置对象存在语法错误：width、height、lineWidth等属性错误嵌套在chart对象内部，不符合Google Charts的配置规范。

修正后的完整代码 #

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
          data.addColumn('number', 'Width in pcs');
          data.addColumn('number', 'Test1');
          data.addColumn('number', 'Test2');

      data.addRows([
        [250,  1.097438, 4.080916],
        [500,  1.915228, 7.398398],
        [750,  2.386182, 9.241248],
        [1000, 2.692818, 10.348892],
        [1250, 2.86978,  11.033738],
        [1500, 3.091832, 11.663874],
        [1750, 3.262076, 12.256484],
        [2000, 3.279888, 12.21683]
      ]);

      var options = {
        title: 'Perfomance testing depending on width (height = 1080, n = 250, 20 iterations)',  
        width: 900,
        height: 500,
        lineWidth: 4,
        series: {
          0: { 
            lineDashStyle: [4, 4],
            pointShape: 'circle',
            pointSize: 6
          },
          1: { 
            lineDashStyle: [4, 4],
            pointShape: 'circle',
            pointSize: 6
          }
        },
        axes: {
          x: { 0: {side: 'bottom'} }
        },
        vAxes: {
            0: {title: 'Time (secs)', titleTextStyle: {color: 'black'}}
        },
        hAxes: {
            0: {title: 'Width (pics)', titleTextStyle: { color: 'black' } }
        },
        legend: {position: 'top', textStyle: {color: 'black', fontSize: 15}}
      };

      var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

关键修改说明 #

• 替换图表类型：移除google.charts.Line，改用google.visualization.LineChart（CoreChart经典版本），该版本完全支持lineWidth、lineDashStyle、pointShape等样式配置。
• 修正配置结构：将原本嵌套在chart对象内的width、height、lineWidth等属性移至配置根层级，符合Google Charts的配置规则。
• 强制显示数据点：在series中添加pointSize设置数据点大小，确保所有数据点可见；pointShape可自定义数据点形状（如圆形、方形等）。
• 启用虚线样式：通过lineDashStyle: [4,4]设置线段为4像素实线+4像素空白的虚线样式，数值可根据需求调整。

内容的提问来源于stack exchange，提问作者GreyKoshak