使用系列中的不同符號

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到來添加另一個系列來繪製數據子集的符號3210。我們也可以指定通過設置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顯示了完整的例子。