浮動圖表 - 不同的線條和點顏色取決於數據

我有dis/likes的折線圖。正值應該有一個較深的綠色邊框，而紅色則表示較深的紅色邊框。此外，紅點應填充紅色，而不是綠色。浮動圖表 - 不同的線條和點顏色取決於數據

這就是它的樣子！ enter image description here

這是應該的樣子 enter image description here

幾個小時，我不可能獲得這個任何解決方案之後，所以任何幫助是值得歡迎的。下面是我的代碼：

$.plot("#curvePlaceholder", [{ 
    data: data, 
    color: "#83ce16", 
    threshold: { 
     below: 0, 
     color: "#c00000" 
    }, 
    lines: { 
     fill: true, 
     lineWidth: 3, 
     fillColor: { 
      colors: [{ opacity: 1 }, { opacity: 1 } ] 
     } 
    } 
}], 
    { 
    series: { 
     lines: { 
      show: true, 
      fill: true 
     }, 
     points: { 
      show: true, 
      fillColor: '#83ce16' 
     } 
    }, 
    grid: { 
     hoverable: true, 
     clickable: true, 
     backgroundColor: 'transparent', 
     color: 'transparent', 
     show: true, 
     markings: [ 
      { yaxis: { from: 0, to: 0 }, color: "#737374"} 
     ], 
     markingsLineWidth: 6 
    }, 
    yaxis: { 
     show: false, 
     <?=$chart_data['ymin'];?> 
     <?=$chart_data['ymax'];?> 
    }, 
    xaxis: { 
     show: false, 
     min: -0.4 
    } 
});

來源

2013-11-28 tecmec

你可以在jsfiddle中複製這個嗎？或者至少告訴我們'數據'等於什麼？ – Mark

獲得看你以後最簡單的方法是刪除閾值插件，並分爲兩個系列：

[{ 
    data: [[0,0],[5,1],[7,0]], 
    color: "#83ce16", 
    lines: { 
     fill: true, 
     lineWidth: 3, 
     fillColor: { 
      colors: [{ opacity: 1 }, { opacity: 1 } ] 
     } 
    }, 
    points: { 
     show: true, 
     fillColor: '#83ce16' 
    } 
},{       
    data: [[7,0],[11,-1],[11,0]], 
    color: "#c00000", 
    lines: { 
     fill: true, 
     lineWidth: 3, 
     fillColor: { 
      colors: [{ opacity: 1 }, { opacity: 1 } ] 
     } 
    }, 
    points: { 
     show: true, 
     fillColor: '#c00000' 
    } 
}],

小提琴here。

來源

2013-11-30 01:28:58 Mark

如果一個人使用數據陣列，也可以如這樣做：

var dataset = [ 
    { label: "Success", data: convertedSuccessArray, points: { fillColor: "green" } }, 
    { label: "Failed", data: convertedFailedArray, points: { fillColor: "red" } } 
];

來源

2014-10-22 11:32:20 Slaphead

其實，如果你能保持閾值插件，如果你打開補斷的點，並增加了「的lineWidth」。這會給出閾值顏色的實心圓的外觀。缺點是這會創建比默認大小更大的圓圈。

points: { 
    show: true, 
    fill: false, 
    lineWidth: 6 
}

來源

2015-07-16 21:31:35 samnau

儘管我發現這種方法有一個缺點。閾值插件會在您的限制和您的數據相遇處創建點，因此對這些點着色會使這些「假」數據點着色。所以記住這一點。這是閾值插件的一個已知問題。 – samnau

浮動圖表 - 不同的線條和點顏色取決於數據

回答

相關問題