更改谷歌图表选项无效

Change google charts options not working

本文关键字：选项 无效 谷歌      更新时间：2023-09-26

我创建了一个谷歌图表，数据是从数据库中提取的，并进行结构化以满足图表的要求，然而，由于某种原因，每当我尝试更改图表的选项时，它都无法工作。我需要将图例移动到图表下方，并使图表上的点大小为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轴向值）

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

并且似乎Line在绘制任何之前每个系列需要两个数据点

我建议使用'corechart'而不是

theme: '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>

相关文章：