Javascript flot 不显示数据系列

Question

我正在使用 flot 在条形图上显示一些数据。但是由于某种原因我的数据没有显示，我不知道为什么。

据我所知，我的数据系列是正确的，但仍然无法显示。

JsFiddle: http://jsfiddle.net/9jhpyne4/1/

代码：

var plotData = [
    [1, 12.35],
    [2, 34.6],
    [3, 56.7],
    [4, 4.35]
]; 

$.plot($("#main-chart"), plotData, {
bars: {
    show: true,
    lineWidth: 0,
    fill: true,
    fillColor: {
        colors: [{
            opacity: 0.8
        }, {
            opacity: 0.1
        }]
    }
}
});

Answer 1

控制台抛出一个关于您的#main-chart 宽度和高度无效的错误。

将宽度和高度从基于百分比更改为基于像素似乎修复了错误。

HTML

<div id="main-chart" style="width:200px;height:200px;"></div>

这是你更新后的 fiddle

Answer 2

传递给 plot 函数的数据需要一些元数据（如标签和颜色）：

var data = [
    [1, 12.35],
    [2, 34.6],
    [3, 56.7],
    [4, 4.35]
];
var dataset = [{ label: "a label", data: data, color: "red" }];

https://jsfiddle.net/9jhpyne4/3/

Answer 3

您需要指定宽度和高度。

<div id="main-chart" style="width:200px;height:200px;"></div>

并且您需要将 plotData 变量稍微更改为：

var plotData = [
[[1,0], [1, 12.35]],
[[2,0], [2, 34.6]],
[[3,0], [3, 56.7]],
[[4,0], [4, 4.35]]];

你可以在这里看到一个完整的例子：here

Javascript flot 不显示数据系列

Javascript flot not showing data series

javascript

jquery

flot

HTML