0

我是n00bie。很抱歉，如果这对你们中的某些人来说不是一个合适的问题。也许有人会帮助我。我想在 C#/.net 中开发一个带有一些控件和 ajax 可更新图表（基于 MVC）的简单工具。我找到了一个简单而干净的教程。但它是在 2010 年写的。我想知道它是否有点现代？或者已经改变了什么并且这种风格已经过时了？如果在按下某些按钮后使用 jquery 在图表上执行更新是一个好主意，我特别感兴趣？

我还包括本教程的一个片段，所以也许你能让我变得更好： 

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Annual Sales Data (With Fancy JavaScript!)
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            // Populate the Categories and Years DDLs with the values from the server
        $.getJSON('/Api/Years',        // URL that returns data of interest
                  function (result) {       // The function that executes once the data has been returned
                      var years = $("#years");
                      $.each(result, function (index, year) {
                          years.append($("<option />").val(year).text(year));
                      });

                      $.getJSON('<%=Page.ResolveClientUrl("~/Api/Categories")%>',        // URL that returns data of interest
                          function (result) {       // The function that executes once the data has been returned
                              var categories = $("#categories");
                              $.each(result, function (index, categoryName) {
                                  categories.append($("<option />").val(categoryName).text(categoryName));
                              });

                              // Load the image
                              UpdateImage();
                           });
                  });

            // Add client-side event handlers to these DDLs
            $("#years").change(UpdateImage);
            $("#categories").change(UpdateImage);
        });

        function UpdateImage() {
            var selectedYear = $("#years").val();
            var selectedCategory = $("#categories").val();

            $("#chart").fadeOut(function () {
                $(this).attr('src', '/Charts/SalesByYear?CategoryName=' + escape(selectedCategory) + '&OrderYear=' + escape(selectedYear) + '&showTitle=false')
                       .attr('alt', 'Sales for ' + selectedCategory + ' in ' + selectedYear)
                       .attr('title', 'Sales for ' + selectedCategory + ' in ' + selectedYear);

                $(this).fadeIn();
            });
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Annaul Sales Data (With Fancy JavaScript)</h2>
    <p>
        This demo shows how to gussy up the sales data charting example using a tad of JavaScript and jQuery.
    </p>
    <div style="text-align: center">
        <h2 style="text-align: center">Sales For <select id="categories"></select> In <select id="years"></select></h2>
        <img id="chart" style="display:none" />
    </div>
</asp:Content>

任何人都可以向我推荐任何教程，我可以在其中了解如何使用 flotcharts 实现基于 mvc 的 Web 应用程序？

谢谢！

4

2 回答 2

0

我会看类似 flot http://www.flotcharts.org/的东西， 而不是在服务器端生成图像。

于 2012-10-17T13:38:15.440 回答
-1

您可能想检查jqPlot。它是一个非常好的使用 jQuery 的图形插件。

于 2012-10-29T11:42:35.767 回答