Google 来自 Jinja 的可视化图表多线图时间序列

Question

我有来自 Jinja 的数据，其中包含每个用户的数据。它包含这种数据：

{
{"user": "test1", "daily_scores": [0: "date":12/11/12, "score": 30, 1: "date":12/12/12, "score": 40 ]},
{"user": "test2", "daily_scores": [0: "date":12/11/12, "score": 30, 1: "date":12/12/12, "score": 20 ]},
{"user": "test3", "daily_scores": [0: "date":12/1/12, "score": 30, 1: "date":12/12/12, "score": 30 ]},
}

我能够在 JS 中正确格式化它并在 google 可视化中使用但是它没有正确显示，它只显示一个用户：

我对 google 可视化的尝试：

   <script>

    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {

    datas = JSON.parse({{persons_performance|tojson|safe}});



    var data = new google.visualization.DataTable();

    data.addColumn('date', 'Date');
    data.addColumn('number', 'Score');
    data.addColumn({ type: 'string', id: 'Person', role: 'annotation' });


    for (var i = 0; i < datas.length; i++) {

        person_name = datas[i]['user'];




        daily_score_datas = datas[i]['daily_scores']
        console.log(daily_score_datas)
        for (var i = 0; i < daily_score_datas.length; i++) {
            daily_score = daily_score_datas[i];
            daily_score_date = new Date(daily_score['date']);
            daily_score_score = daily_score['score'];
            data.addRow([daily_score_date, daily_score_score, person_name]);
       }

    }

      var options = {
        {#chartArea:{ width:"100%", height:"100%"},#}
        title: "Person Performance over Time",
        height: 500,
        width: 1300,
        hAxis: {
        title: 'Time',
        textPosition: 'none'
        },

        vAxis: {
          title: 'Score'
        },
        series: {
          1: {curveType: 'function'}
        },
        legend: {position: 'none'}
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }


    </script>

这很奇怪，因为我显然有三列和每行三个值。我需要帮助来制作它，以便它可以显示为每个人的多行，每行中都有他们的分数。谢谢！

Answer 1

为了在图表中创建多条线，
您需要数据 table.
中的多个系列或列换句话说，您需要为每个用户创建一列...

所以不是单列...

data.addColumn('date', 'Date');
data.addColumn('number', 'Score');

您需要多个，每个用户一个...

data.addColumn('date', 'Date');
data.addColumn('number', 'User 1');
data.addColumn('number', 'User 2');
data.addColumn('number', 'User 3');

我们可以根据提供的数据动态构建列，
但我们的方法会有些不同。

我们需要在循环数据时添加列，
然后保存我们创建的列的列索引。
这意味着我们需要在每一行上单独设置每个单元格的值。

例如，首先用日期列创建数据table...

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');

然后当我们遍历数据时，添加用户列...

datas.forEach(function (row) {
  // create the data table column for the user and user annotation
  var person_name = row['user'];
  var column_index = data.addColumn('number', person_name);
  var column_index_ann = data.addColumn({type: 'string', role: 'annotation'});

  // next, loop the scores for the user
  var daily_score_datas = row['daily_scores'];
  daily_score_datas.forEach(function (daily_score) {
   // get score values
    var daily_score_date = new Date(daily_score['date']);
    var daily_score_score = daily_score['score'];

    // add a new blank row and save row index
    var row_index = data.addRow();

    // set values for the date, user, and user annotation
    data.setValue(row_index, 0, daily_score_date);
    data.setValue(row_index, column_index, daily_score_score);
    data.setValue(row_index, column_index_ann, person_name);
  });
});

请参阅以下工作示例...

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawCurveTypes() {
  var datas = [
    {"user": "test1", "daily_scores": [{"date":"12/11/2021", "score": 0}, {"date":"12/12/2021", "score": 40}]},
    {"user": "test2", "daily_scores": [{"date":"12/11/2021", "score": 10}, {"date":"12/12/2021", "score": 20}]},
    {"user": "test3", "daily_scores": [{"date":"12/11/2021", "score": 20}, {"date":"12/12/2021", "score": 30}]},
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');

  datas.forEach(function (row) {
    // create the data table column for the user and user annotation
    var person_name = row['user'];
    var column_index = data.addColumn('number', person_name);
    var column_index_ann = data.addColumn({type: 'string', role: 'annotation'});

    // next, loop the scores for the user
    var daily_score_datas = row['daily_scores'];
    daily_score_datas.forEach(function (daily_score) {
     // get score values
      var daily_score_date = new Date(daily_score['date']);
      var daily_score_score = daily_score['score'];

      // add a new blank row and save row index
      var row_index = data.addRow();

      // set values for the date, user, and user annotation
      data.setValue(row_index, 0, daily_score_date);
      data.setValue(row_index, column_index, daily_score_score);
      data.setValue(row_index, column_index_ann, person_name);
    });
  });

  var options = {
    //chartArea: {width:"100%", height:"100%"},
    title: "Person Performance over Time",
    height: 500,
    width: 1300,
    hAxis: {
      title: 'Time',
      textPosition: 'none'
    },
    vAxis: {
      title: 'Score'
    },
    series: {
      1: {curveType: 'function'}
    },
    legend: {position: 'none'}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

Google 来自 Jinja 的可视化图表多线图时间序列

Google Visualization Chart Multiple LineChart TimeSeries from Jinja

javascript

charts

google-visualization

jinja2