Как нарисовать линейный график Google с несколькими строками данных - PullRequest
Новая
       33

Как нарисовать линейный график Google с несколькими строками данных

1 голос
/ 24 мая 2019

Я хочу отобразить результаты студентов, используя один график.
В год проводится 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>

Ссылка на выход этого кода

Ось равна нулю.Он не генерирует диаграмму согласно данным.

1 Ответ

1 голос
/ 24 мая 2019

, если вы проверяете формат данных для линейного графика,
только первый столбец в таблице данных может иметь тип 'string',
остальное должно быть 'number'

в этом случае вы можете конвертировать каждую оценку в число.
затем используйте обозначение объекта, чтобы показать оценку вместо числа.
использование нотации объекта позволяет указать значение (v:) и форматированное значение (f:)
{v: 0, f: 'A'}
форматированное значение отображается по умолчанию.

далее, если вы хотите настроить вертикальную ось, используя ticks,
вы не сможете использовать материал график -> google.charts.Line
Вам нужно будет использовать классический график вместо -> google.visualization.LineChart

есть несколько опций, которые не поддерживаются материалом диаграмм, включая ticks
для получения дополнительной информации см. Проблема отслеживания для паритета характеристик диаграммы материалов .

см. Следующий рабочий фрагмент для примера ... 

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>
...