Question

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

http://people.iola.dk/olau/flot/examples/ajax.html

我已经修改了一些标记 - 而不是按钮，我有各种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>

Answer 1

如何做到这一点 - 在设置$("input.fetchSeries").click之后，通过调用$("input.fetchSeries:first").click()来触发它。您需要修改:first部分，以匹配您实际想要设置的复选框。

看起来像这样：http://jsfiddle.net/ryleyb/bdSrc/

获取默认图表以显示在FLOT图表上

1 个答案: