javascript - 图表.org : how to draw scatterplots with full circle as symbol?

Question

使用 flotchart.org ，我想替换默认的“圆”形状来表示一个点，只是一个类似的圆，但填充了系列的颜色；例如，颜色“红色”与某个系列相关联: 我想表示的符号是，使用 HTML5 canvas API:

var ctx=c.getContext("2d");ctx.beginPath(); ctx.arc(100,75,3,0,2*Math.PI); ctx.fillStyle="red"; ctx.fill();

但我无法获得结果，根据 flotchart documentation 的建议进行编码.

正如上面文档中所建议的，我在选项中编写了自定义函数:

          points: {
            show: true,
            radius: 2,
            symbol: 
                function fullCircle(ctx, x, y, radius, shadow) {        
                    ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
                    ctx.fill();
                }, 

ctx.fill 没有按预期工作:圆圈被黑色填充，在指向之后，我想在聚焦点之前用与相应系列相关的颜色填充圆圈...

抱歉我对canvas ctx的无知...

Answer 1

有flot设置组合绘制实心圆(圆盘)来表示系列点 引用自文档 https://github.com/flot/flot/blob/master/API.md

"fill" is whether the shape should be filled. For lines, this produces area graphs. You can use "fillColor" to specify the color of the fill. If "fillColor" evaluates to false (default for everything except points which are filled with white), the fill color is auto-set to the color of the data series. You can adjust the opacity of the fill by setting "fill" to a number between 0 (fully transparent) and 1 (fully opaque).

因此您只需将 series.points.fillColor 选项设置为 false(以使用系列颜色，或您喜欢的任何颜色)。 和 series.points.fill 到 1 以获得完全不透明。只是玩弄 fiddle 。

这是 JsFiddle .