Question

我对chart.js中绘制条形图有疑问让我解释一下我的问题，我创建了一个按钮和文本框，你应该给出你想要绘制的元素数量。接下来我放了数据，它应该可以工作。

Var选项包含绘制图表的选项。选项之后，我已经参与了创建更多字段，我可以输入我的数据，当我创建了超过0个元素时，会出现按钮绘制。至少我有功能将我的数据推入数组和绘图，这部分不起作用:(请帮助

我用饼图做了同样的事情，但有不同的选择。一切都来自Chart.js文档。任何人都可以帮我弄清楚如何让它工作？谢谢:)）

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>LinkButtonStairs</title>
</head>

<body>
        <div>
            <p>Provide your data here, how many data u need?</p>
            <input type="text" id="someShiet" />
            <input type="button" value="ADD" id="addTextboxes" />
        </div>
        <br><br>

        <div id="textboxContainer">

        </div>

        <canvas id="myChart" height="800" width="400"></canvas>

        <script>

            var boxCounter = 0;
            var data = 0;
            var context = document.getElementById('myChart').getContext('2d');

            var options = {
                    scaleBeginAtZero : true,
                    scaleShowGridLines : true,
                    scaleGridLineColor : "rgba(0,0,0,.05)",
                    scaleGridLineWidth : 1,
                    scaleShowHorizontalLines: true,
                    scaleShowVerticalLines: true,
                    barShowStroke : true,
                    barStrokeWidth : 2,
                    barValueSpacing : 5,
                    barDatasetSpacing : 1,
                    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
                }

            $("#addTextboxes").on("click", function () {
                boxCounter = $("#someShiet").val();
                $("#textboxContainer").html("");
                for (var i = 0; i < $("#someShiet").val() ; i++) {
                    $("#textboxContainer").append('<input type="text" class="chartData" id="whatever' + i + '"/><br><br>');
                }
                if ($("#someShiet").val() > 0)
                    $("#textboxContainer").append('<input type="button" value="Draw" id="drawChart" />');

            });
            $(document).on("click", "#drawChart", function (event) {
                data = new Array();
                for (var i = 0; i < boxCounter ; i++) {
                    data.push({
                        data : $("#whatever").val(),
                        fillColor: "lightblue",
                        labels: $("#whatever").val() + "element"
                    });
                }
                var mybarChartLoc = new Chart(context).Bar(data, options);
            });

        </script>
    </body>
</html>

Answer 1

条形数据格式与饼形数据格式不同。此外，您尚未在文本框选择器中包含索引。

您需要将处理程序更改为

$(document).on("click", "#drawChart", function (event) {
    data = {
        labels: [],
        datasets: [
            {
                fillColor: "lightblue",
                data: []
            }
        ]
    };
    for (var i = 0; i < boxCounter ; i++) {
        data.labels.push($("#whatever" + i).val() + "element");
        data.datasets[0].data.push($("#whatever" + i).val())
    }
    var mybarChartLoc = new Chart(context).Bar(data, options);
});

用chart.js jQuery绘制条形图

1 个答案: