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

Question

我正在根据谷歌图表上的散点图绘制收视率。我已经正确设置了要发送的代码

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]值。在第1季结束后，颜色从蓝色变为红色。我如何在python或JS中实现这一点

Answer 1

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

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]]);}

Answer 2

您可以使用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'],