점수에 따라 jQuery flot 막대 색상을 설정하십시오.

Question

jQuery flot 플러그인을 처음 사용하고 있으며 점수에 따라 각 막대의 색상을 설정하고 싶습니다. 빨간색

20 - 70 : : 노란색

70-100 : 녹색

점수 용 - 20

• 0 : "나 자신"바의 점수
  "You"표시 줄 :
  • 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입니다. 도와 주셔서 정말 고맙습니다.

Answer 1

은 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} 
});