Question

我尝试使用Chart.js创建数据可视化。

我的问题非常简单......

我有不同身份证的多人。

检查输入＆＃34;来自＆＃34;输入＆＃34;到＆＃34;

您将能够在图表中获取数据，

如果你检查A到B你得到一些数据，如果你检查A到C其他一些......等等......

所以我使用多条件来定义数据必须在我的图表中显示。

这是我的代码，

<input id="DFN001" type="checkbox" name="DFN001" onclick="check()" value="from" >From DFN001</li>

和我的JavaScript

<script>

var ctx1 = document.getElementById("chart_1").getContext("2d");
var data = datas1 ;

function validate(){
    var DFN001 = document.getElementById('DFN001');
    if (DFN001.checked){
        datas1 = [10,15,20,85,30,35,40];
    }else{
        alert("You didn't check it! Let me check it for you.")
    }
}



var lineChartData1 = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : data
                }
            ]

        }




            document.getElementById('generate_1').onclick = function() 
                {
                    window.myPie = new Chart(ctx1).Line(lineChartData1,{

                responsive: true
            }); 

        };


</script>

但是当我尝试它时，我得到了这个错误...＆＃34;未捕获的ReferenceError：数据1未定义＆＃34; ......

有人可以帮帮我吗？或者还有其他方式可以做到吗？

非常感谢！

最诚挚的问候，美好的一天，

的Mirko

Answer 1

您需要处理几个与程序流相关的内容。

在尝试使用datas1设置data之前，需要初始化

validate()。所以你需要调用validate()，而不仅仅是声明它。在datas1中，只有选中复选框后才会设置data。现在，让我们使用HTML进行检查（当您添加其余代码时，请记住不要尝试设置<input id="DFN001" type="checkbox" name="DFN001" onclick="check()" value="from" checked>From DFN001，除非设置了datas1，即选中了相应的复选框）

    ...
    validate();

    var ctx1 = document.getElementById...

调用验证非常简单

new Chart(ctx1).Line(lineChartData1);

您需要调用新图表来实际渲染图表。像

这样的东西

<canvas id="chart_1"></canvas>

最后你需要在你的HTML中使用canvas元素（我假设你已经有了这个 - 只是为了完整性而包括在内）

data

简而言之，您需要调用图表初始化，{{1}}初始化等（在您的复选框点击上），并牢记以上内容。

以上是所有上述变化的小提琴 - http://jsfiddle.net/cy2spqrg/

多重复选框和图表数据

1 个答案: