通过烧瓶向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]值。第1季结束后颜色从蓝色变为红色的Kinda like this graph I made in matplotlib。如何在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]]);}