0

这是我为 Json 获取的字符串。请建议我如何使用它在 mvc4 中使用 razor c# 创建 Jqplot 折线图。x 轴是日期字符串（即下午 3 点、下午 4 点等），y 轴是需求值。

[{"Demand":4422.45,"Supply":17660,"Date":"\/Date(1236504600000)\/","DateString":"3 PM"},
{"Demand":5019.27,"Supply":20699,"Date":"\/Date(1236508200000)\/","DateString":"4 PM"},
{"Demand":5030.35,"Supply":19917,"Date":"\/Date(1236511800000)\/","DateString":"5 PM"},
{"Demand":5172.35,"Supply":23597,"Date":"\/Date(1236515400000)\/","DateString":"6 PM"},
{"Demand":5656.51,"Supply":21572,"Date":"\/Date(1236519000000)\/","DateString":"7 PM"},
{"Demand":4622.88,"Supply":7794,"Date":"\/Date(1236522600000)\/","DateString":"8 PM"},
{"Demand":3116.21,"Supply":3427,"Date":"\/Date(1236526200000)\/","DateString":"9 PM"},
{"Demand":1588.83,"Supply":1883,"Date":"\/Date(1236529800000)\/","DateString":"10 PM"},
{"Demand":1394.15,"Supply":1403,"Date":"\/Date(1236533400000)\/","DateString":"11 PM"},
{"Demand":1321.76,"Supply":3755,"Date":"\/Date(1236537000000)\/","DateString":"12 AM"},
{"Demand":1130.98,"Supply":3474,"Date":"\/Date(1236540600000)\/","DateString":"1 AM"},
{"Demand":1277.1,"Supply":1072,"Date":"\/Date(1236544200000)\/","DateString":"2 AM"},
{"Demand":1214.68,"Supply":1025,"Date":"\/Date(1236547800000)\/","DateString":"3 AM"},
{"Demand":2117.91,"Supply":1198,"Date":"\/Date(1236551400000)\/","DateString":"4 AM"},
{"Demand":1658.97,"Supply":1485,"Date":"\/Date(1236555000000)\/","DateString":"5 AM"},
{"Demand":1997.36,"Supply":3126,"Date":"\/Date(1236558600000)\/","DateString":"6 AM"},
{"Demand":2147.37,"Supply":4785,"Date":"\/Date(1236562200000)\/","DateString":"7 AM"},
{"Demand":2114.13,"Supply":5268,"Date":"\/Date(1236565800000)\/","DateString":"8 AM"},
{"Demand":2389.84,"Supply":5264,"Date":"\/Date(1236569400000)\/","DateString":"9 AM"},
{"Demand":2240.77,"Supply":5526,"Date":"\/Date(1236573000000)\/","DateString":"10 AM"},
{"Demand":1802.43,"Supply":4530,"Date":"\/Date(1236576600000)\/","DateString":"11 AM"},
{"Demand":1929.71,"Supply":6618,"Date":"\/Date(1236580200000)\/","DateString":"12 PM"},
{"Demand":545.65,"Supply":2767,"Date":"\/Date(1236583800000)\/","DateString":"1 PM"},
{"Demand":0,"Supply":1,"Date":"\/Date(1236587400000)\/","DateString":"2 PM"}]

编辑：代码

            <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
            <script src="~/Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"></script>
            <link href="~/Content/jquery.jqplot.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.highlighter.min.js"></script>
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.cursor.min.js"></script>
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.dateAxisRenderer.min.js"></script>

            <script type="text/javascript">
            $(document).ready(function () {

            var rawData = [{ "Demand": 4422.45, "Supply": 17660, "Date": "/Date(1236504600000)/", "DateString": "3 PM" }, { "Demand": 5019.27, "Supply": 20699, "Date": "/Date(1236508200000)/", "DateString": "4 PM" }, { "Demand": 5030.35, "Supply": 19917, "Date": "/Date(1236511800000)/", "DateString": "5 PM" }, { "Demand": 5172.35, "Supply": 23597, "Date": "/Date(1236515400000)/", "DateString": "6 PM" }, { "Demand": 5656.51, "Supply": 21572, "Date": "/Date(1236519000000)/", "DateString": "7 PM" }, { "Demand": 4622.88, "Supply": 7794, "Date": "/Date(1236522600000)/", "DateString": "8 PM" }, { "Demand": 3116.21, "Supply": 3427, "Date": "/Date(1236526200000)/", "DateString": "9 PM" }, { "Demand": 1588.83, "Supply": 1883, "Date": "/Date(1236529800000)/", "DateString": "10 PM" }, { "Demand": 1394.15, "Supply": 1403, "Date": "/Date(1236533400000)/", "DateString": "11 PM" }, { "Demand": 1321.76, "Supply": 3755, "Date": "/Date(1236537000000)/", "DateString": "12 AM" }, { "Demand": 1130.98, "Supply": 3474, "Date": "/Date(1236540600000)/", "DateString": "1 AM" }, { "Demand": 1277.1, "Supply": 1072, "Date": "/Date(1236544200000)/", "DateString": "2 AM" }, { "Demand": 1214.68, "Supply": 1025, "Date": "/Date(1236547800000)/", "DateString": "3 AM" }, { "Demand": 2117.91, "Supply": 1198, "Date": "/Date(1236551400000)/", "DateString": "4 AM" }, { "Demand": 1658.97, "Supply": 1485, "Date": "/Date(1236555000000)/", "DateString": "5 AM" }, { "Demand": 1997.36, "Supply": 3126, "Date": "/Date(1236558600000)/", "DateString": "6 AM" }, { "Demand": 2147.37, "Supply": 4785, "Date": "/Date(1236562200000)/", "DateString": "7 AM" }, { "Demand": 2114.13, "Supply": 5268, "Date": "/Date(1236565800000)/", "DateString": "8 AM" }, { "Demand": 2389.84, "Supply": 5264, "Date": "/Date(1236569400000)/", "DateString": "9 AM" }, { "Demand": 2240.77, "Supply": 5526, "Date": "/Date(1236573000000)/", "DateString": "10 AM" }, { "Demand": 1802.43, "Supply": 4530, "Date": "/Date(1236576600000)/", "DateString": "11 AM" }, { "Demand": 1929.71, "Supply": 6618, "Date": "/Date(1236580200000)/", "DateString": "12 PM" }, { "Demand": 545.65, "Supply": 2767, "Date": "/Date(1236583800000)/", "DateString": "1 PM" }, { "Demand": 0, "Supply": 1, "Date": "/Date(1236587400000)/", "DateString": "2 PM" }];

            var plotData = []

            for (var i = 0; i < rawData.length; i++) {
                plotData[i] = [rawData[i].DateString, rawData[i].Demand, rawData[i].Supply];
            }

            var plot1 = $.jqplot('chart1', [plotData], {
                title: 'Title of the Chart',
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        label: "Date"
                    },
                    yaxis: {
                        label: "Demand"
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: false
                }
            });
            });

            </script>
            </head>
            <body>
            <div>
            <div id="chart1" style="height:400px;width:600px; "></div>  
            </div>
            </body>

我想创建一个包含两条线的折线图，一条用于需求，另一条用于供应。以前我使用的是 CanvasAxisLabelRenderer javascript 文件，但使用日期值我无法显示图表。请指教。再次感谢您的帮助。

4

1 回答 1

0

答案实际上取决于您希望如何处理这些DateString字段。如果您只是希望它按原样显示，例如“9 AM”，那么您可以使用以下内容：

var rawData = [{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}];

var plotData = []

for(var i = 0; i < rawData.length; i++) {
    plotData[i] = [rawData[i].DateString, rawData[i].Demand];
}

此时您应该可以plotData用作 jqplot 的输入。

编辑：

所以这里的技巧是正确解析Date字段中的日期并使用DateString. 在你的 for 循环中试试这个：

for (var i = 0; i < rawData.length; i++) {
    //Parse the date.
    var date = new Date(+rawData[i].Date.match(/\d+/));
    //Grab the hour string.
    var hour = +rawData[i].DateString.match(/\d+/);
    //Figure out if this is PM.
    var isPm = rawData[i].DateString.indexOf("PM") > -1;

    //Set the hours property, but add 12 if this is PM.
    date.setHours(hour + (isPm ? 12 : 0));
    //The minutes should probably be zero.
    date.setMinutes(0);

    plotData[i] = [date, rawData[i].Demand, rawData[i].Supply];
}

现在要让您的 x 轴显示格式的刻度3 PM，您需要tickOptions在配置轴时设置：

tickOptions: { formatString: '%#I %p' }

如果您想显示一条供应线，我建议您考虑使用第二个 x 轴 - 这将允许您在适合数据的比例上使用另一个轴。

参考：

  • JavaScript 日期对象：MDN
  • jqplot 日期格式选项：jqplot Docs
于 2013-03-24T01:24:50.553 回答