javascript - 更改谷歌图表选项不起作用

Question

我创建了一个谷歌图表，数据是从数据库中提取的，并进行结构化以满足图表的要求，但是，由于某种原因，每当我尝试更改图表的选项时，它就不起作用。我需要将图例移至图表下方，并使图表上的点大小为 30 像素。

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Aspect');
      data.addColumn('number', 'Leaner');
      data.addColumn('number', 'Norm');
      data.addColumn('number', 'Grade');

      data.addRows([['Agility ', 11.5, 10, 11.5]]);
      var options = 
      {
        legend: { position: 'bottom' },
        chart: {title: 'Student Results'},
        legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
        pointSize:30,
      };

      var chart = new google.charts.Line(document.getElementById('line_chart'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
</script>

<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>

关于为什么图例不会移动或点大小不会改变的任何建议，图表数据可以有很多方面(x轴值)，我需要改变点大小，这样它就不会看起来只有一个方面(x轴值)为空白轴值)

Answer 1

有几个选项在 Material 图表中根本不起作用

看起来Line在绘制任何内容之前需要每个系列两个数据点

我建议使用'corechart'代替

有一个主题:'material'选项，可以使基本外观和感觉接近到 Material 图表

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Aspect');
    data.addColumn('number', 'Leaner');
    data.addColumn('number', 'Norm');
    data.addColumn('number', 'Grade');

    data.addRows([['Agility 1', 11.5, 10, 11.5]]);

    var options = {
      chartArea: {
        width: '90%'
      },
      height: 600,
      legend: {
        position: 'bottom',
        textStyle: {
          color: 'black',
          fontSize: 16
        }
      },
      pointSize: 30,
      theme: 'material',
      title: 'Student Results',
      vAxis: {
        viewWindow: {
          min: 0,
          max: 15
        }
      },
      width: '100%'
    };

    var chart = new google.charts.Line(document.getElementById('line_chart'));
    chart.draw(data, google.charts.Line.convertOptions(options));

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['line', 'corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>