Google圖表，將數據動態推送到柱形圖

Question

這就是圖表的樣子

問題是如何動態地向該圖表添加數據，導致當前，它是靜態的？

這是Charts.js的代碼：

google.charts.setOnLoadCallback(drawChart);
function drawChart(secondChartData) {
var chartData = [["Timeout duration", "Timeout score", "Debrief duration", "Debrief score"]];
var data = google.visualization.arrayToDataTable([
    ["Text", "Value", { role: "style" }, { role: "interval" }, { role: "interval" } ],
    ["Timeout duration", 28.50, "#50c4ec", 22, 35],
    ["Timeout score", 10, "#016380", 6, 17],
    ["Debrief duration", 50, "#50c4ec", 42, 58],
    ["Debrief score", 30, "#016380", 22, 38]
]);


var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
                      { calc: "stringify",
                        sourceColumn: 1,
                        type: "string",
                        role: "annotation" },
                      2, 3, 4]);

var options = {
    backgroundColor: { fill:'transparent' },
    colors: ['#50c4ec', '#016380', '#5fcec7', '#016380'],
    title: 'Data',
    titleTextStyle: {
        fontSize: 15,
        bold: true,
    },
    bar: {
        groupWidth: "90%"
    },
    interval: { 'style':'boxes', 'color': '#000000' },
    legend: {
        position: "none"
    },
    vAxis: {
        gridlines: {
            count: 0
        }
    }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);

}

順便說一下，項目在Django框架中。

我嘗試這樣的事情，但仍然無法正常工作：

function drawChart(secondChartData) {
    var Header = ["Text", "Value", { role: "style" }, { role: "interval" }, { role: "interval" } ];
    var data = [];
    data.push(Header);


 for (var i = 0; i < secondChartData.length; i++) {
      var temp=[];
      temp.push(secondChartData[i].timeout_duration);
      temp.push(secondChartData[i].timeout_score);
      temp.push(secondChartData[i].debrief_duration);
      temp.push(secondChartData[i].debrief_score);

      data.push(temp);
}

// for (var i = 0; i < firstChartData.length; i++) {
//  data.push([secondChartData[i].timeout_duration, secondChartData[i].timeout_score, secondChartData[i].debrief_duration, secondChartData[i].debrief_score]);
// }


var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
                      { calc: "stringify",
                        sourceColumn: 1,
                        type: "string",
                        role: "annotation" },
                      2, 3, 4]);

var options = {
    backgroundColor: { fill:'transparent' },
    colors: ['#50c4ec', '#016380', '#5fcec7', '#016380'],
    title: 'Data',
    titleTextStyle: {
        fontSize: 15,
        bold: true,
    },
    bar: {
        groupWidth: "90%"
    },
    intervals: { 'style':'box', 'color': '#000000' },
    interval: { 'style':'box', 'color': 'rgb(0,0,0)' },
    legend: {
        position: "none"
    },
    vAxis: {
        gridlines: {
            count: 0
        }
    }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);

}

不知道如何從Django獲取數據並將其顯示在圖表中。

這是我將JS連接到模板的方式：

{% block extra_js %}
<script src="{% static 'js/charts.js' %}"></script>
{% endblock extra_js %}

Answer 1

根據您的設置，您可以在包含此JavaScript的HTML文件中的<script>標記中呈現動態數據，也可以將charts.js文件本身動態呈現為Django服務的URL。 在后一種情況下，您將要確保在渲染中指定content_type 。 無論哪種情況，您都可能想使用{% escapejs %}過濾器。

根據您的更新進行編輯：

在這種情況下，最簡單的方法是做類似

{% block extra_js %}
<script>
let data = []
{% for d in data_from_django %}
    data.push("{{ d }}");
</script>
<script src="{% static 'js/charts.js' %}"></script>
{% endblock extra_js %}