Javascript 获取要在FLOT图表上显示的默认图表

我正在使用这个特定的FLOT示例使用我们的一些数据构建图表：

我对标记做了一些修改—我没有使用按钮，而是用以下方式为各种JSON文件设置了复选框：

<span>
  <input class="fetchSeries" type="checkbox"> Service One
  <a href="@Server.MapPath("~/Scripts/flot/servicedataone.json")"></a>
</span>

服务一

我希望在页面加载时使用一个JSON文件预先填充图形。我尝试过各种方法，包括在页面加载时默认选中其中一个复选框，但没有成功

感谢您的帮助！代码如下：

 <script type="text/javascript">
    $(document).ready(function () {
        var options = {
            lines: { show: true },
            points: { show: true },
            yaxis: {
            },
            xaxis: { 
            mode: "time"
            },
            grid: { hoverable: true }
        };
        var data = [];
        var placeholder = $("#placeholder");

        $.plot(placeholder, data, options);

        // fetch one series, adding to what we got
        var alreadyFetched = {};

        $("input.fetchSeries").click(function () {
            var button = $(this);

            // find the URL in the link right next to us 
            var dataurl = button.siblings('a').attr('href');

            // then fetch the data with jQuery
            function onDataReceived (series) {
                // extract the first coordinate pair so you can see that
                // data is now an ordinary Javascript object
                var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';

                //button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);

                // let's add it to our current data
                if (!alreadyFetched[series.label]) {
                    alreadyFetched[series.label] = true;
                    data.push(series);
                }

                // and plot all we got
                $.plot(placeholder, data, options);
            }

            $.ajax({
                url: dataurl,
                method: 'GET',
                dataType: 'json',
                success: onDataReceived
            });
        });
     });
</script>

$（文档）.ready（函数（）{
变量选项={
行：{show:true}，
要点：{show:true}，
亚克斯：{
},
xaxis:{
模式：“时间”
},
网格：{hoverable:true}
};
var数据=[]；
变量占位符=$（“#占位符”）；
$.plot（占位符、数据、选项）；
//获取一个系列，添加到我们得到的
var alreadyFetched={}；
$（“input.fetchSeries”）。单击（函数（）{
var按钮=$（此按钮）；
//在我们旁边的链接中找到URL
var dataurl=button.sibbins（'a'）.attr（'href'）；
//然后使用jQuery获取数据
函数onDataReceived（系列）{
//提取第一个坐标对，以便可以看到它
//数据现在是一个普通的Javascript对象
var firstcoordinate='（'+series.data[0][0]+'，'+series.data[0][1]+'）；
//button.sides（'span'）.text（'Fetched'+series.label+'，第一个点：'+firstcoordinate）；
//让我们将其添加到当前数据中
如果（！alreadyFetched[series.label]）{
alreadyFetched[series.label]=真；
数据推送（系列）；
}
//把我们所有的东西都画出来
$.plot（占位符、数据、选项）；
}
$.ajax({
url:dataurl，
方法：“GET”，
数据类型：“json”，
成功：已收到
});
});
});

如何-设置

$（“input.fetchSeries”）。单击
，通过调用
$（“input.fetchSeries:first”）。触发它。单击（）。您需要修改
：first
部分以匹配实际要设置的复选框

它看起来是这样的：
我测试了这个，效果很好：唯一的区别是在JSFIDLE中我生成了数据并将其从JSFIDLE中反弹出来，因为我没有从中获取数据的服务器。