Правильно ли отправлять информацию в список для Google-карт через 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);
  }

, который в настоящее время создает график Google-диаграммы со всеми синими точками. Однако, Я хочу изменить цвета точек данных после заданного значения [x] до другого заданного значения [x]. Вроде как этот график я сделал в matplotlib , где цвета меняются с синего на красный после окончания первого сезона. Как бы я достиг этого в python или JS?

Answer 1

вы можете использовать стиль роль столбца

в вашем 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]]);}