Question

我是n00bie。很抱歉，如果对你们中的某些人来说这不是一个合适的问题。也许有人会帮助我。我想在C＃/ .net中开发一个带有一些控件和ajax-updatable图表（基于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应用程序的教程吗？

谢谢！

Answer 1

我会看一下像http://www.flotcharts.org/这样的东西而不是在服务器端生成图像。

Answer 2

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

我需要一些使用图表的线索

2 个答案: