2

我试图在我的浮动图上为我的一个数据系列使用不同的符号，因为它的规模比其他数据大得多。我使用这个例子作为参考：http ://www.flotcharts.org/flot/examples/symbols/index.html

这是我到目前为止所拥有的：

我的包括：

<script  type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>

然后我像这样配置我的浮动选项：

var options = {
        grid: {hoverable : true},
        xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
        series: { points : { show: true } }
        };

然后我实际绘制数据：

 $.plot('#placeholder', [{
               data: my_data,
               lines: { show : true},
               points: { symbol: "square"},
               color: '#CB4B4B',
               label: 'My Data'
               }], options);
        }

但是，flot仍将点绘制为默认圆。我在 firebug 中没有收到错误消息，我什至尝试在jquery.flot.symbol.js库本身中添加一条日志消息，以查看“square”处理程序是否被这样调用：

var handlers = {
            square: function (ctx, x, y, radius, shadow) {
                console.log("Square handler was called");
                // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.rect(x - size, y - size, size + size, size + size);
            },

我没有收到控制台消息，所以我假设处理程序没有被正确调用。我在这里错过了什么吗？

编辑：

我试图绘制的数据示例：

var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];

我还编辑了我的options参数以及绘图函数的调用方式：

var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
}; 

 $.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);

我也确定该symbol库已包含在内，因为我已将一些日志记录添加到该库中，并且显示效果很好。

4

1 回答 1

4

我认为你所做的没有问题。我在这里做了一个快速的工作示例：http: //jsfiddle.net/ryleyb/shLtU/1/

我猜你没有包含符号库（即使你说你有）。

或者显示您的数据，可能存在某种问题（值得怀疑？）。

这是flot我为制作一个工作示例而运行的完整代码（加上包括 flot 和符号库）：

$.plot('#placeholder', [{
    data: [
        [1, 1],
        [2, 3],
        [4, 4],
        [5, 9]
    ],
    lines: {
        show: true
    },
    points: {
        show: true,
        symbol: "square"
    },
    color: '#CB4B4B',
    label: 'My Data'
}]);
于 2013-03-27T15:58:39.413 回答