javascript - 用 javascript 绘制图表

标签 javascript flot

我对 JavaScript 很陌生。我喜欢从以下数组中绘制图表:

var sampleData = [
                                    { Period: '1981', Size: 80.01 , Age: 32 },
                                    { Period: '1981', Size: 89.11, Age : 35 }];    

我使用 jquery.flot.js 库来绘制图表。这是绘制图表的示例,它工作正常:

var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [d1, d2]);  

根据示例,这是我绘制图表的代码:

var myData1 = [];
     for (var i in sampleData) {
        myData.push( sampleData[i].Period, sampleData[i].Size);
    } 
var myData2 = [];
     for (var i in sampleData) {
        myData.push( sampleData[i].Period, sampleData[i].Age);
    }              
$.plot($("#placeholder"), [myData1, myData2 ]);         

但是使用这段代码我的图表没有任何线条!!!

有人可以指出我的错在哪里吗?

最佳答案

而不是

myData.push( sampleData[i].Period, sampleData[i].Size);

我想你想要

myData.push( [sampleData[i].Period, sampleData[i].Size] );

这将创建一个数组数组(其中内部数组是 x,y 坐标)。

关于javascript - 用 javascript 绘制图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10524891/

相关文章:

javascript - 什么样的算法可以生成这样的曲线 (img) & 它可以在 javascript 中为 flot 完成吗?

jquery - Flot - 设置线垂直顺序(z-index)

graph - float 图表标题选项?

javascript - Flot 刻度转子显示刻度两次

javascript - 任何在生成的混淆代码中不使用 eval 的 JavaScript 混淆器?

javascript - 如何为HTTP GET 请求设置header,并触发文件下载?

javascript - 当子函数返回 false 时退出父函数

javascript - Rails 3.1 不显眼的 Javascript 与 Flot

javascript - jquery 因下拉菜单选择操作而失败

javascript - Vue - 在组件或路由 View 中使用 axios?