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参数以及如何调用绘图函数：

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'
}]);

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

1 个答案: