串联使用不同的符号

Question

我可以在同一系列中使用多种类型的符号吗？我有一个图表，其中第 5 点应该是一个圆圈，第 6 点和第 8 点是另一个，并且相互连接

Answer 1

不，您不能使用多个符号绘制一个系列，但您可以通过绘制多个系列来获得相同的效果，每个系列都有自己的符号和相同数据的子集。这需要 jquery.flot.symbol 插件。

例如，我们要绘制以下数据：

data: [
    [0, 150],
    [1, 175],
    [2, 190],
    [3, 160],
    [4, 140],
    [5, 150],
    [6, 200],
    [7, 170],
    [8, 155],
    [9, 165],
    [10, 160],
    [11, 145]
]

我们可以通过将 points.show 设置为 false 并将 lines.show 设置为 true (example) 来创建一个仅绘制线条的系列：

var series = [{
    data: [ [0, 150], [1, 175], [2, 190], [3, 160], [4, 140], [5, 150], [6, 200], [7, 170], [8, 155], [9, 165], [10, 160], [11, 145] ],
    points: { show: false },
    lines: { show: true },
    color: "#81A0C1"
}];

然后我们可以通过将 points.show 设置为 true 并将 lines.show 设置为 false 来添加另一个系列来绘制数据子集的符号。我们还可以通过设置 points.symbol (example):

来指定绘制哪个符号

var series = [{
    data: [ [0, 150], [1, 175], [2, 190], [3, 160], [4, 140], [5, 150], [6, 200], [7, 170], [8, 155], [9, 165], [10, 160], [11, 145] ],
    points: { show: false },
    lines: { show: true },
    color: "#81A0C1"
},
{
    data: [ [4, 140], [9, 165], [10, 160], [11, 145] ],
    points: {
        show: true,
        symbol: "cross"
    },
    lines: { show: false },
    color: "#81A0C1"
}];

我们可以添加另一个系列，再次通过将 points.show 设置为 true 并将 lines.show 设置为 false，并选择不同的数据子集和符号 (example):

var series = [{
    data: [ [0, 150], [1, 175], [2, 190], [3, 160], [4, 140], [5, 150], [6, 200], [7, 170], [8, 155], [9, 165], [10, 160], [11, 145] ],
    points: { show: false },
    lines: { show: true },
    color: "#81A0C1"
},
{
    data: [ [4, 140], [9, 165], [10, 160], [11, 145] ],
    points: {
        show: true,
        symbol: "cross"
    },
    lines: { show: false },
    color: "#81A0C1"
},
{
    data: [ [0, 150], [3, 160], [5, 150], [7, 170], [8, 155] ],
    points: {
        show: true,
        symbol: "circle"
    },
    lines: { show: false },
    color: "#81A0C1"
}];

可以对所有数据点重复此过程，由您的实施来决定如何将点分组到每个符号中。在这个例子中，我将每个系列的颜色设置为相同的颜色，但如果您希望不同的符号具有不同的颜色，您也可以为每个系列使用不同的颜色。

这个 JSFiddle 显示了完整的示例。

串联使用不同的符号

Use different symbols in series

jquery

flot