Question

我有以下代码，可以在白天制作一个简单的价格折线图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Flot Line Graph</title>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
            padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


</head>

<body>

<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
    <form>
      <input id="price_cat" type="radio" name="price_val"  value="0" checked> LMP<br>
      <input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
      <input id="price_cat" type="radio" name="price_val"  value="2">MCC
    </form>
</div> 
<div class="col-md-4">
    <h4 id ="title"></h4>
    <div id="placeholder" style = "width:850px; height:450px"></div>
    <h4>Hour</h4>
    </div>
</div>

</body>
<script type="text/javascript">
//Rome, Italy


var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);

});

$.when(mkt_data).then(function(data) {

    var price_data = data
    var collection = []
    var lmp_c =[]
    var mcc_c = []
    var mlc_c = []

    var series = []
    data.forEach(function(a) {
        var lmp_s = []
        var mcc_s = []
        var mlc_s = []


        lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
        lmp_c.push(lmp_s);

        mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
        mcc_c.push(mcc_s)

        mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
        mlc_c.push(mlc_s)
    })

series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})


  console.log(series[0].label);

  $("#title").html("Average LMP per hour of the Day Jan - June 2016")

$.plot($("#placeholder"), [series[0]], {xaxis: {
        min:0,
        max:24,
        tickSize: [1]
    },
    legend: {
            labelBoxBorderColor: "none",
                position: "right"
        },
    series: {lines: { show: true },
            points: {
                radius: 3,
                show: true,
                fill: true
            }   
    }
});


$("input:radio[name=price_val]").change(function(){

var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);

$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")

 $.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
        min:0,
        max:24,
        tickSize: [1]
    },
    legend: {
            labelBoxBorderColor: "none",
                position: "right"
        },
    series: {lines: { show: true },
            points: {
                radius: 3,
                show: true,
                fill: true
            }   
    }
});   

});

});

图表工作，变更监听器也是如此，但我无法让淡入淡出正常工作。我通常会将它附加到元素选择器，但是flot库$.plot()函数让我不清楚我应该将调用放在fadeIn()的哪个位置。我只是想在更改数据集时实现更平滑的过渡。电话的淡入淡出是在第114行。

淡入功能无法使用Flot中的Chart

0 个答案: