使用不同的符号绘制数据不起作用

Question

我试图在我的flot图上为我的一个数据系列使用不同的符号,因为它比其他数据大得多.我使用此示例作为参考: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>

然后我配置我的flot选项如下:

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参数以及如何调用plot函数:

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要包含库,因为我已经将一些日志记录添加到库中,并且显示正常.

Answer 1

我发现你所做的事情没有问题.我在这里做了一个快速工作的例子: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'
}]);