Question

您好我对以下脚本有2个问题。

问题1：为什么只有Test1date，Test1time，Test1Test1modules等......获得不同的颜色，而Test1date，Test2date，Test3date等的颜色......获得相同的颜色，以及如何我可以改变吗？

问题2：我只想打印下面“失败”和“封面”的复选框，但如何检查某个键是否包含“封面”或“失败”的内容？至于现在我检查一个键是否等于“Test3failed”或“Test2cover”。但我只想检查key ==包含“cover”或“failed”的内容在此先感谢=）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="root/include/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="root/include/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="root/include/jquery.flot.crosshair.js"></script>
 </head>
    <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:400px;"></div>


    <p id="choices">Show:</p>

<script type="text/javascript">
$(function () {

        var Name1 = {
    "Test1date": {
        label: "COSDate",
        data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    },        
    "Test1time": {
        label: "Time",
          data: [[1, 209], [2, 201], [3, 201], [4, 134]]
    },
   "Test1Test1modules": {
        label: "Modules",
         data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test1cases": {
        label: "Cases",
         data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test1failed": {
        label: "Failed",
          data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test1cover": {
        label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }}; 

var Name2 = {
    "Test2date": {
        label: "CASDate",
        data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    },        
    "Test2time": {
        label: "Time",
          data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    },
   "Test2modules": {
        label: "Modules",
         data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test2cases": {
        label: "Cases",
         data: [[1, 101], [2, 201], [3, 201], [4, 45]]
    }, 
    "Test2failed": {
        label: "Failed",
          data: [[1, 301], [2, 454], [3, 43], [4, 125]]
    }, 
    "Test2cover": {
        label: "Cover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }}; 

var Name3 = {
    "Test3date": {
        label: "MVSDate",
        data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    },        
    "Test3time": {
        label: "Time",
          data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    },
   "Test3modules": {
        label: "Modules",
         data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test3cases": {
        label: "Cases",
         data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }, 
    "Test3failed": {
        label: "Failed",
          data: [[1, 245], [2, 501], [3, 432], [4, 195]]
    }, 
    "Test3cover": {
        label: "errover",
data: [[1, 201], [2, 201], [3, 201], [4, 125]]
    }};
       var allDataSets = [Name1,Name2,Name3];

    // hard-code color indices to prevent them from shifting as
    // countries are turned on/off
    for(var j=0; j<allDataSets.length; j++){
    var i = 0;
    $.each(allDataSets[j], function(key, val) {**//Here is where the colours are set for `diffrent data`**
        val.color = i; //The same object of the 3 diffrent datasets are getting the `same color, why, and how can I solve this?`
        ++i;

    });


    var choiceContainer = $("#choices");

    $.each(allDataSets[j], function(key, val) {
    if(key=="Test3failed" || key=="Test2cover"){

        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');


    }
    });

    }
      choiceContainer.find("input").click(plotAccordingToChoices);


    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function() {
    var key = $(this).attr("name");
    $.each(allDataSets, function(_, set) {
        if (set[key]) data.push(set[key]);
    });
});

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
            series: {
                   lines: { show: true },
                   points: { show: true }
               },
               crosshair: { mode: "x" },
               grid: { hoverable: true, clickable: true},
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 }
            });
    }


    plotAccordingToChoices();
});

</script>

 </body>
</html>

Answer 1

1）您为对象获得相同的颜色，因为您在每个循环开始时设置var i = 0;，将其移动到循环表达式之外。

2）您可以使用.indexOf检查变量是否包含另一个变量。例如，要检查key是否包含“封面”，您可以执行以下操作：if (key.indexOf("cover") > -1) { ... }

需要有关数据集flot jquery的建议

1 个答案: