通过 Flask 向 JS 正确发送 google 图表的列表信息？

Question

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

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] 值。 Kinda like this graph I made in matplotlib 第 1 季结束后颜色从蓝色变为红色。我如何在 python 或 JS 中实现这一点？

Answer 1

您可以使用 style 列角色

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

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'],

Answer 2

这是我正确格式化数据块后的工作代码。

Python

def SendtoHTML():
 finalEpNumParsable = int(finalEpNum)
 datapointTest = [[1, 8.7, "0000ff"],[2, 6.7, "orange"],[3, 8.7, "0000ff"],[4,6.7,'red']]
 render = render_template('Scatter.html', dataPoint = datapointTest)
 return render

JS

    function drawChart() {
    var dataPoint = {{ dataPoint | tojson }};
    var series = '{{series}}';
    var finalEpUnparsed = {{finalEpNum}}
    var finalEpNum = parseInt(finalEpUnparsed, 10);

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

    ]);
    for (i = 1; i < finalEpNum-5; i++){
    data1.addRows([dataPoint[i]]);}

通过 Flask 向 JS 正确发送 google 图表的列表信息？

Sending list information for google charts properly via flask to JS?

javascript

python

json

google-visualization

flask