Question

我有一个计算器，它从两个下拉值中获取值并通过数组运行它们来计算某个条件将结束的几率。我得到了它的工作，我以文本格式显示结果。我的老板现在要我用条形图显示结果。我选择使用chart.js并且可以使图表处理将实际数据输入图表，但需要从所选下拉列表的结果中提取数据。

由于某些原因，jsfiddle中的计算器无法正常工作，但在我的网站上。不知道为什么。

下面我有我用于chart.js的脚本

<script src="js/Chart.js"></script>
<script src="js/Chart.HorizontalBar.js"></script>
<script src="js/Chart.StackedBar.js"></script>

<script>

var barData = {
    labels : ["50% Probability","80% Probability","95% Probability","99% Probability"],
    datasets : [
        {
            label: "Birth No Condition",
            fillColor : "#137fc1",
            strokeColor : "#137fc1",
            data : [0,5,10,15]
        },
        {
            label: "Current Age",
            fillColor : "#ff0000",
            strokeColor : "#ff0000",
            data : [0,5,10,15]
        }

    ]
}

var myChart = document.getElementById("myChart").getContext("2d");

new Chart(myChart).StackedBar(barData, {
    scaleShowLabels: true,
    responsive: true
});

</script>

我需要将下拉列表中的数据加载到每个数据集数据中，而不是说它

datasets : [
        {
            label: "Birth No Condition",
            fillColor : "#137fc1",
            strokeColor : "#137fc1",
            data : [0,5,10,15]
        },

会说

datasets : [
        {
            label: "Birth No Condition",
            fillColor : "#137fc1",
            strokeColor : "#137fc1",
            data : colicWeeks
        },
datasets : [
        {
            label: "Birth No Condition",
            fillColor : "#137fc1",
            strokeColor : "#137fc1",
            data : finalAge50
        },

我想我想说的是如何从每个下拉选项的结果中推送数据，然后将结果吐出到chart.js条形图中？

Answer 1

只需更新脚本的后半部分（您应该能够根据下面的第1行找到将其粘贴到的位置）

    ...

    if (colicWeeks >= 0) {
        document.getElementById('totalWeeks').style.display = 'block';

        var barData = {
            labels: ["50% Probability", "80% Probability", "95% Probability", "99% Probability"],
            datasets: [
                {
                    label: "Birth No Condition",
                    fillColor: "#137fc1",
                    strokeColor: "#137fc1",
                    data: [c50F, c80F, c95F, c99F]
                },
                {
                    label: "Current Age",
                    fillColor: "#ff0000",
                    strokeColor: "#ff0000",
                    data: [
                        finalAge50,
                        finalAge80,
                        finalAge95,
                        finalAge99
                    ]
                }
            ]
        }

        document.getElementById('myChart').style.display = 'block';

        var myChart = document.getElementById("myChart").getContext("2d");
        if (myBarChart !== undefined)
            myBarChart.destroy();
        myBarChart = new Chart(myChart).StackedBar(barData, {
            scaleShowLabels: true,
            responsive: true
        });
    } else {
        document.getElementById('myChart').style.display = 'none';
        document.getElementById('totalWeeks').style.display = 'none';
    }

    divobj.innerHTML = "Your child has currently had colic for " + colicWeeks + " weeks. <br /><br />Their is a " + p50 + "% chance that your childs colic will end in " + c50F + " weeks at " + finalAge50 + " weeks of age. <br /><br />Their is a " + p80 + "% chance that your childs colic will end in " + c80F + " weeks at " + finalAge80 + " weeks of age. <br /><br />Their is a " + p95 + "% chance that your childs colic will end in " + c95F + " weeks at " + finalAge95 + " weeks of age. <br /><br />Their is a " + p99 + "% chance that your childs colic will end in " + c99F + " weeks at " + finalAge99 + " weeks of age.";
}
var myBarChart;

function hideTotal() {
    var divobj = document.getElementById('totalWeeks');
    divobj.style.display = 'none';
    document.getElementById('myChart').style.display = 'none';
}

然后添加一个canvas元素，可能在结果块

之后

 <div id="totalWeeks"></div>
 <canvas id="myChart"></canvas>

根据下拉列表中的选择更新chart.js

1 个答案: