我要在JavaScript中实时更改此条形图？

发布于 2025-01-17 12:50:25 字数 1954 浏览 0 评论 0原文

我正在尝试自动更新此条形图。我在网站上查找了要添加的代码，但我不知道如何将其应用到我所拥有的代码中。这是条形图所在的页面：https://lifespringchurch.com/spiritual-gifts-survey / （条形图位于页面的最底部。）一个人完成调查后，他们的最终统计结果应显示在条形图中。

<html>
<head>
<script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
</head>
<body>
<div id="container" style="width: 75%; height: 75%"></div>
<script>
anychart.onDocumentReady(function() {

// set the data
var data = {
header: ["Gift", "Value"],
rows: [
["Leadership", document.getElementById("ninja_forms_field_464").value],
["Administration", document.getElementById("ninja_forms_field_465").value],
["Teaching", document.getElementById("ninja_forms_field_467").value],
["Knowledge", document.getElementById("ninja_forms_field_468").value],
["Wisdom", document.getElementById("ninja_forms_field_469").value],
["Prophecy", document.getElementById("ninja_forms_field_470").value],
["Discernment", document.getElementById("ninja_forms_field_471").value],
["Exhortation", document.getElementById("ninja_forms_field_472").value],
["Shepherding", document.getElementById("ninja_forms_field_473").value],
["Faith", document.getElementById("ninja_forms_field_474").value],
["Evangelism", document.getElementById("ninja_forms_field_475").value],
["Apostleship", document.getElementById("ninja_forms_field_476").value],
["Service", document.getElementById("ninja_forms_field_477").value],
["Mercy", document.getElementById("ninja_forms_field_478").value],
["Giving", document.getElementById("ninja_forms_field_479").value],
["Hospitality", document.getElementById("ninja_forms_field_480").value]
]};


// create the chart
var chart = anychart.column();


// add the data
chart.data(data);

// draw
chart.container("giftgraph");
chart.draw();

});
</script>
</body>
</html>

原文

I'm trying to automatically update this bar chart. I've looked on websites for what code to add, and I don't know how to apply it to what I have.
Here is the page the bar chart is on: https://lifespringchurch.com/spiritual-gifts-survey/
(The bar chart is at the very bottom of the page.)
After a person is done with the survey, their final tallies should be shown in the bar graph.

<html>
<head>
<script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
</head>
<body>
<div id="container" style="width: 75%; height: 75%"></div>
<script>
anychart.onDocumentReady(function() {

// set the data
var data = {
header: ["Gift", "Value"],
rows: [
["Leadership", document.getElementById("ninja_forms_field_464").value],
["Administration", document.getElementById("ninja_forms_field_465").value],
["Teaching", document.getElementById("ninja_forms_field_467").value],
["Knowledge", document.getElementById("ninja_forms_field_468").value],
["Wisdom", document.getElementById("ninja_forms_field_469").value],
["Prophecy", document.getElementById("ninja_forms_field_470").value],
["Discernment", document.getElementById("ninja_forms_field_471").value],
["Exhortation", document.getElementById("ninja_forms_field_472").value],
["Shepherding", document.getElementById("ninja_forms_field_473").value],
["Faith", document.getElementById("ninja_forms_field_474").value],
["Evangelism", document.getElementById("ninja_forms_field_475").value],
["Apostleship", document.getElementById("ninja_forms_field_476").value],
["Service", document.getElementById("ninja_forms_field_477").value],
["Mercy", document.getElementById("ninja_forms_field_478").value],
["Giving", document.getElementById("ninja_forms_field_479").value],
["Hospitality", document.getElementById("ninja_forms_field_480").value]
]};


// create the chart
var chart = anychart.column();


// add the data
chart.data(data);

// draw
chart.container("giftgraph");
chart.draw();

});
</script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难忘№最初的完美 2025-01-24 12:50:25

据我了解，我认为此代码可能会起作用。
任何图表都有一些有关如何更新图表的文档。
链接：

    for(var i = 0; i < data.rows.length; i++){
        data.rows(i, [data.rows[i][0], data.rows[i][1]]);
    }

这是奥利弗

From what I understand I think this code might work.
Any Chart does have some documentation on how to update a chart.
Here is the link: https://docs.anychart.com/Working_with_Data/Data_Sets

    for(var i = 0; i < data.rows.length; i++){
        data.rows(i, [data.rows[i][0], data.rows[i][1]]);
    }

Cheers, Oliver

回复收藏 0 原文

夏九 2025-01-24 12:50:25

我回去，代码有一些错误，所以我回去修复了它们。
因此，这是最终代码： https://codepen.io/olifire/pen/pen/pen/rnpwpep

    function update(){
        // Some code to check if the form is filled
        for(var i = 0; i < data.rows.length; i++){
        data.rows[i] = [data.rows[i][0], data.rows[i][1]];
        // Sets new data
        chart.data(data);
        // Redraws chart
        chart.draw();
        }
        }

欢呼，奥利弗

I went back and there were a few errors with the code so I went back fixed them.
So here is the final code: https://codepen.io/olifire/pen/rNpwpeP

    function update(){
        // Some code to check if the form is filled
        for(var i = 0; i < data.rows.length; i++){
        data.rows[i] = [data.rows[i][0], data.rows[i][1]];
        // Sets new data
        chart.data(data);
        // Redraws chart
        chart.draw();
        }
        }

Cheers, Oliver

回复收藏 0 原文

~没有更多了~