Javascript jqplot图表,包含来自变量的数据和来自JSON的数据

Javascript jqplot图表,包含来自变量的数据和来自JSON的数据,javascript,jquery,json,jqplot,Javascript,Jquery,Json,Jqplot,我试图通过变量将数据加载到jqplot图表中,但它只显示第一个值。我不明白他为什么要这样做 JavaScript: $(document).ready(function () { var sin = [[20, 10, 0, 10, 15, 25, 35, 50, 48, 45, 35, 30, 15, 10]]; var plot = $.plot($(".chart"), [{ data: sin, label: "

我试图通过变量将数据加载到jqplot图表中,但它只显示第一个值。我不明白他为什么要这样做

JavaScript:

    $(document).ready(function () {

        var sin = [[20, 10, 0, 10, 15, 25, 35, 50, 48, 45, 35, 30, 15, 10]];

        var plot = $.plot($(".chart"),
               [{ data: sin, label: "sin(x)", color: "#ee7951" }], {
                   series: {
                       lines: { show: true },
                       points: { show: true }
                   },
                   grid: { hoverable: true, clickable: true },
                   yaxis: { min: 0, max: 60 }
               });

        var previousPoint = null;
        $(".chart").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $('#tooltip').fadeOut(200, function () {
                        $(this).remove();
                    });
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    maruti.flot_tooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
                }

            } else {
                $('#tooltip').fadeOut(200, function () {
                    $(this).remove();
                });
                previousPoint = null;
            }
        });

    });

    maruti = {
        flot_tooltip: function (x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                top: y + 5,
                left: x + 5
            }).appendTo("body").fadeIn(200);
        }
    }

</script>
$(文档).ready(函数(){
var sin=[[20,10,0,10,15,25,35,50,48,45,35,30,15,10];
变量图=$.plot($(“.chart”),
[{数据:sin,标签:“sin(x)”,颜色:#ee7951}{
系列:{
行:{show:true},
要点:{show:true}
},
网格:{hoverable:true,clickable:true},
yaxis:{min:0,max:60}
});
var-previousPoint=null;
$(“.chart”).bind(“plothover”、函数(事件、位置、项目){
如果(项目){
if(上一个点!=item.dataIndex){
previousPoint=item.dataIndex;
$(“#工具提示”).fadeOut(200,函数(){
$(this.remove();
});
var x=项。数据点[0]。固定(2),
y=item.datapoint[1].toFixed(2);
maruti.flot_工具提示(item.pageX、item.pageY、item.series.label+“of”+x+“=”+y);
}
}否则{
$(“#工具提示”).fadeOut(200,函数(){
$(this.remove();
});
previousPoint=null;
}
});
});
马鲁蒂={
flot_工具提示:函数(x、y、内容){
$(''+内容+'').css({
顶部:y+5,
左:x+5
}).appendTo(“body”).fadeIn(200);
}
}
最后,我更喜欢使用JSON格式的数据,第一个值用于图表,第二个值用于轴

数据:

[“50.00”、“3/18/2015 2:00:00 PM”]、[“37.00”、“3/12/2015 3:42:44 PM”]、[“35.00”、“3/11/2015 3:42:44 PM”]


任何使用此类数据的建议或样本链接都将不胜感激。

字符串格式错误。我最终使用了实体框架

所以我的代码后面看起来像:

using (myEntities myEntitiesContainer = new myEntities()) { var alldata = myEntitiesContainer.myData(id).ToList(); foreach (myData i in alldata) { if (alldata.IndexOf(i) == alldata.Count - 1) { sb.Append("['").Append(i.DateData.ToString("yyyy-MM-dd HH:mmtt")).Append("', ").Append(i.SomeData.ToString()).Append("]"); } else { sb.Append("['").Append(i.DateData.ToString("yyyy-MM-dd HH:mmtt")).Append("', ").Append(i.SomeData.ToString()).Append("], "); } } myReturnString = sb.ToString(); } 使用(myEntities myEntities容器=新的myEntities()) { var alldata=myentiescontainer.myData(id.ToList(); foreach(所有数据中的myData i) { if(alldata.IndexOf(i)==alldata.Count-1) { sb.Append(“[”).Append(i.DateData.ToString(“yyyy-MM-dd HH:mmtt”)).Append(“,”).Append(i.SomeData.ToString()).Append(“]); } 其他的 { sb.Append(“[”).Append(i.DateData.ToString(“yyyy-MM-dd HH:mmtt”)).Append(“,”).Append(i.SomeData.ToString()).Append(“,”); } } myReturnString=sb.ToString(); } 返回字符串:

[['2015-03-31 16:00PM', 30.00], ['2015-03-31 14:00PM', 40.00], ['2015-03-31 13:00PM', 50.00]] [2015-03-31 16:00PM',30.00],[2015-03-31 14:00PM',40.00],[2015-03-31 13:00PM',50.00]] Javascript看起来像:

var renderGraph = function () { var plot var line1 = plot = $.jqplot('chart', [line1], { axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, tickOptions: { min: 0, formatString: '%b%#d' }, tickInterval: '1 day' }, yaxis: { tickOptions:{ formatString: '%d'} } }, highlighter: { show: true, yvalues: 1, xvalues: 1, formatString: 'Date: %s Level: %s' }, cursor: { show: false, tooltipLocation: 'sw' }, legend: { show: false } }); } var renderGraph=函数(){ 变量图 变量行1= 绘图=$.jqplot('图表',[line1]{ 轴线:{ xaxis:{ 渲染器:$.jqplot.DateAxisRenderer, 选项:{min:0,格式字符串:'%b%#d'}, 间隔时间:“1天” }, 亚克斯:{ 选项:{formatString:'%d'} } }, 荧光灯:{ 秀:没错, Y值:1, X值:1, formatString:'日期:%s级别:%s' }, 光标:{ 秀:假,, 工具提示位置:“sw” }, 图例:{ 节目:假 } }); }