Question

我想用一个图表显示学生的成绩。
一年有4个考试阶段，每个阶段有5个活动，每个活动的等级从 A到G 。
为此，我正在使用Google折线图。

用于生成图形的代码

[<html>
<head>
  <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(drawLineChart);

        function drawLineChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Phase');
            data.addColumn('string', 'Activity 1');
            data.addColumn('string', 'Activity 2');
            data.addColumn('string', 'Activity 3');
            data.addColumn('string', 'Activity 4');
            data.addColumn('string', 'Activity 5');

            data.addRows([
            ['1', 'A','B','C','D','E'],
            ['2', 'E','D','C','B','A'],
            ['3', 'A','B','C','D','E'],
            ['4', 'E','D','C','B','A'],
            ]);

            var options = {
            title: 'Student Result',
            width: 600,
            height: 550,
            legend: { position: 'bottom' },

            vAxis: { ticks: ['A','B','C','D','E','F','G']}
            };

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

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

Link to the Output of this code

轴为空。它不会根据数据生成图表。

Answer 1

如果您检查data format的折线图，
只有数据表中的第一列可以是'string'类型，
其余应为'number'

在这种情况下，您可以将每个年级转换为一个数字。
然后使用对象符号显示成绩而不是数字。
使用对象表示法可让您提供值（v:）和格式值（f:）
{v: 0, f: 'A'}
默认情况下显示格式化的值。

下一步，如果要使用ticks自定义垂直轴，
您将无法使用材料图表-> google.charts.Line
您将需要使用经典图表-> google.visualization.LineChart

材料图表不支持几个选项，包括ticks
有关更多信息，请参见Tracking Issue for Material Chart Feature Parity。

有关示例，请参见以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var scale = {
    'A': 0,
    'B': 1,
    'C': 2,
    'D': 3,
    'E': 4,
    'F': 5,
    'G': 6
  };

  var grades = [
    ['1','A','B','C','D','E'],
    ['2','E','D','C','B','A'],
    ['3','A','B','C','D','E'],
    ['4','E','D','C','B','A']
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Phase');
  data.addColumn('number', 'Activity 1');
  data.addColumn('number', 'Activity 2');
  data.addColumn('number', 'Activity 3');
  data.addColumn('number', 'Activity 4');
  data.addColumn('number', 'Activity 5');

  grades.forEach(function (activities) {
    var row = [];
    activities.forEach(function (grade, indexGrade) {
      if (indexGrade === 0) {
        row.push(grade);
      } else {
        row.push({
          v: scale[grade],
          f: grade
        });
      }
    });
    data.addRow(row);
  });

  var options = {
    title: 'Student Result',
    width: 600,
    height: 550,
    legend: {
      position: 'bottom'
    },
    vAxis: {
      ticks: [
        {v: 0, f: 'A'},
        {v: 1, f: 'B'},
        {v: 2, f: 'C'},
        {v: 3, f: 'D'},
        {v: 4, f: 'E'},
        {v: 5, f: 'F'},
        {v: 6, f: 'G'}
      ]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>

如何用多个字符串数据绘制Google折线图

1 个答案: