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

有几个选项在材料图表

中无效

并且在绘制任何内容之前，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>

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

1 个答案: