javascript - 通过 flask 将谷歌图表的列表信息正确发送到 JS？

Question

我在 Google Charts 的散点图上根据剧集绘制收视率。我已正确设置要发送的代码

data = [1, 8.7],[2, 8.8],[3, 8.3],[4, 8.4],[5, 9.3],[6, 8.9],[8, 9.3],[9, 8.4],[10, 8.3],[11, 8.4],[12, 8.9],[13, 8.7],[14, 9.2],[15, 9.1],[16, 8.6],[17, 8.9],[18, 9.3],[19, 9.3],[21, 8.7],[22, 8.5],[23, 8.3],[24, 8.7],[25, 9.3],[26, 9.6],[27, 8.8],[28, 8.5],[29, 7.8],[30, 8.5],[31, 9.5],[32, 9.7],[34, 8.3],[35, 8.1],[36, 8.7],[37, 8.7],[38, 8.5],[39, 8.9],[40, 9.3],[41, 8.9],[42, 9.6]

从 Python 到我的图表。

python :

def SendtoHTML():

  dataPoint = data
  return render_template('Scatter.html', series = series,finalEpNum = finalEpNum,minRatingFinal = minRatingFinal ,dataPoint = dataPoint)


if __name__ == '__main__':
  app.run()

脚本:

<script>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var series = '{{series}}';
    var finalEpNum = '{{finalEpNum}}'
    var minRatingFinal = '{{minRatingFinal}}'
    var data1 = google.visualization.arrayToDataTable([
        ['Episode', 'Rating'],
    ]);

    var options = {

      title: series,
      hAxis: {title: 'Episode', minValue: 1, maxValue: finalEpNum},
      vAxis: {title: 'Rating', minValue: minRatingFinal , maxValue: 10},
      legend: true
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data1, options);
  }

当前创建 a google charts graph with all blue points.但是，我想在给定的 [x] 值之后更改数据点的颜色，直到另一个给定的 [x] 值。有点like this graph I made in matplotlib第 1 季结束后，颜色从蓝色变为红色。我如何在 python 或 JS 中实现这一点？

Answer 1

你可以使用 style栏目作用

在您的 JS 中，将 Angular 色添加为最后一列标题。
(样式 Angular 色要跟在它代表的系列栏目后面)

var data1 = google.visualization.arrayToDataTable([
    ['Episode', 'Rating', {role: 'style', type: 'string'}],  // <-- add style role
]);

然后在你的数据中，你可以添加每个点应该是的颜色......

data = [1, 8.7, 'blue'],[2, 8.8, 'blue'],[3, 8.3, 'blue'],[4, 8.4, 'red'],[5, 9.3, 'red'],[6, 8.9, 'orange'],[8, 9.3, 'orange'],[9, 8.4, 'orange'],