根據分數設置jQuery flot酒吧顏色

我是jQuery flot插件的新手，我想根據分數設置每個酒吧的顏色。根據分數設置jQuery flot酒吧顏色

對於得分的「我」欄：

0 - 20：紅色
20 - 70：黃色
70 - 100：綠色

對於得分「你」吧：

0 - 20：藍色
20 - 70：黑
70 - 100：橙

代碼段：

$.plot(
    $("#placeholder"),[{ 
    data: [[1, 81], [3.5, 33]], 
    label: 'Myself', 
    bars: { 
     show: true, 
     barWidth: 1, 
     lineWidth: 0, 
     fill: true, 
     fillColor: { 
     colors: [{brightness: 1}, {brightness: 0.5}], 
     horizontal: true 
     }, 
     align: "center" 
    } 
    },{ 
    data: [[2, 18], [4.5, 75]], 
    label: 'You', 
    color: 'red', 
    bars: { 
     show: true, 
     barWidth: 1, 
     lineWidth: 0, 
     fill: true, 
     fillColor: { 
     colors: [{brightness: 1}, {brightness: 0.5}], 
     horizontal: true 
     }, 
     align: "center" 
    } 
    }],{ 
    xaxis: { 
     ticks: [[1.5, '1st half'], [4, '2nd half']], 
     min: 0, 
     max: 5.5, 
     tickLength: 0 
    }, 
    yaxis: {tickLength: 0}, 
    grid: { 
     backgroundColor: "#ffffff", 
     borderWidth: 0, 
     markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}] 
    }, 
    legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]}, 
    valueLabels: {show: true, truncateValue: 2} 
});

甲上面的代碼的jsfiddle是here。我非常感謝你的幫助。

來源

2014-04-11 user2975436

我試圖修復該鏈接的格式，它不會讓你添加一個工作的jsfiddle鏈接沒有一些代碼，所以我補充說。盡我所能縮小它... – Xiaofu

您可能實現像this一樣的自定義繪製掛鉤。但是，當我需要這樣做時，我在採用不同的範圍時採取了不同的方法。

如果您可以控制源數據格式，則可以爲每個值範圍創建單獨的系列，並以此方式分配適當的顏色。所以你會有以下系列：Myself0-20，Myself20-70，Myself70-100，You0-20，You20-70，You70-100。

從您的jsfiddle代碼唯一的修改是增加了新的系列（fiddle）：

$.plot($("#placeholder"), [ 
    {data: [[1, 0], [3.5, 0]], label: 'Myself0-20', color: 'red', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}, 
    {data: [[1, 0], [3.5, 33]], label: 'Myself20-70', color: 'yellow', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}, 
    {data: [[1, 81], [3.5, 0]], label: 'Myself70-100', color: 'green', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}, 
    {data: [[2, 18], [4.5, 0]], label: 'You0-20', color: 'blue', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}, 
    {data: [[2, 0], [4.5, 0]], label: 'You20-70', color: 'black', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}, 
    {data: [[2, 0], [4.5, 75]], label: 'You70-100', color: 'orange', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}} 
],{ 
    xaxis: {ticks: [[1.5, '1st half'], [4, '2nd half']], min: 0, max: 5.5, tickLength: 0}, 
    yaxis: {tickLength: 0}, 
    grid: {backgroundColor: "#ffffff", borderWidth: 0, markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}]}, 
    legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]}, 
    valueLabels: {show: true, truncateValue: 2} 
});

來源

2014-04-11 06:09:10 Xiaofu

根據分數設置jQuery flot酒吧顏色

回答

相關問題