HTML

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

控制台会针对您的＃主图宽度＆amp;身高无效。

改变宽度和宽度从百分比到基于像素的高度似乎修正了错误。

HTML

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

这是您更新的fiddle

Answer 2

传递给绘图功能的数据需要有一些元数据（如标签和颜色）：

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没有显示数据系列

3 个答案:

HTML