Question

所以，我有一个包含开始日期，结束日期和选择器的表单，因此您可以选择要从中选择数据的服务器（由id选择），并返回当天的json字符串，温度和服务器ID。这里的一切都很好。

我的问题出现在我尝试制作时，如果您没有选择服务器，它会为您提供所有服务器的所有数据（select stuff from table where id like '%'）。我改编了我的图表生成功能：

function generateChart(data) {
    var results = JSON.parse(data);
    if (results.error == true) {
        var errCode = results.code;
        var errText = results.text;
        defineError(errCode, errText);
    }
    else {
        var chartjsTemp = [];
        var chartjsDate = [];
        if (results.length > 1) {
            for (var i = 1; i < results.length; i++) {
                chartjsTemp.push(results[i].probeTemp);
                chartjsDate.push(results[i].dateProbe);
            }
        }
        else {
            alert ("No results!");
        }
        var ctx = document.getElementById('myChart').getContext('2d');
        var button = $("#submitButton");
        submitButton.addEventListener("click", function(){
            myChart.destroy();
        });
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartjsDate,
                datasets: [{
                    label: 'temp',
                    data: chartjsTemp,
                    backgroundColor: "rgba(240,240,240,0.5)"
                }]
            }
        });
    }
}

我不知道如何调整数据集部分，以便我有一个未知数量的服务器具有不同的数据值（可能会返回3个服务器或5个不同的服务器，具体取决于所使用的数据库）自动而不是必须为每个现有服务器做一个数据集（这意味着我必须为每个服务器的每个数据库执行一个功能）。

编辑：这是一个例子，如果我这样做会发生什么（显然不是很好）：http://imgur.com/a/IgH2c

编辑2：好的，像这样做一个for循环：

for (i=0; i >= chartjsId.length; i++) {
datasets: [{
    label: chartjsId[i],
    data: chartjsTemp,
    backgroundColor: "rgba(240,240,240,0.5)"
}]
}

根本不起作用。我得到了一个很小的框架错误。

Answer 1

据我所知，您已绘制了所有想要的图表，并且知道您想隐藏所有其他图表并显示所选图表。我们可以通过Legends实现这一点，当用户点击图例时，它的显示将从图形切换。

或者我们可以实现这样的jsFiddle

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "First",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,20,20,1)",
        pointColor: "rgba(220,20,20,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 90]
    }, {
        label: "Second",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(15,187,25,1)",
        pointColor: "rgba(15,187,25,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [38, 55, 50, 65, 35, 67, 54]
    }]
};

var options = {
    // String - Template string for single tooltips
    tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
    // String - Template string for multiple tooltips
    multiTooltipTemplate: "<%= value + ' %' %>",
};

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

window.myLineChart = new Chart(ctx).Line(data, options);
window.myLineChart.store = new Array();


$('#selectbox').change(function () {
    var label = $('#selectbox').val();
    var chart = window.myLineChart;
    var store = chart.store;
    var finded = false;

    //Restore all
    for (var i = 0; i < store.length; i++) {
      var restored = store.splice(i, 1)[0][1];
      chart.datasets.push(restored);
    }
    //Если нет, то добавляем в стор
    if (label!='All') {
        console.log('Start search dataset with label = ' + label);
        for (var i = 0; i < chart.datasets.length; i++) {
            if (chart.datasets[i].label === label) {
                chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
            }
        }
    }
    chart.update();
});

在chartjs折线图中分离结果

1 个答案: