Flot Bar Chartの各バーに特定の色を設定します

Question

HTMLページにFlotチャートを作成しました。私は私のプロジェクトのUI htmlテンプレートを作成しようとしています。

HTMLページ：

<div id="page-wrapper"> 
      <div class="row"> 
       <div class="col-lg-6"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          SKILL REPORT 
         </div> 
         <!-- /.panel-heading --> 
         <div class="panel-body"> 
          <div class="flot-chart"> 
           <div class="flot-chart-content" id="flot-bar-chart"></div> 
          </div> 
         </div> 
         <!-- /.panel-body --> 
        </div> 
        <!-- /.panel --> 
       </div> 
      </div> 

バー-Chart.jsファイル：

$(function() { 

    var barOptions = { 
     series: { 
      bars: { 
       show: true, 
       barWidth: 43200000 


      } 
     }, 
     xaxis: { 
      mode: "time", 
      timeformat: "%m/%d", 
      minTickSize: [1, "day"] 
     }, 
     grid: { 
      hoverable: true 
     }, 
     legend: { 
      show: false 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: "x: %x, y: %y" 
     } 
    }; 
    var barData = { 
     label: "bar", 
     data: [ 
      [1354521600000, 1000], 
      [1355040000000, 2000], 
      [1355223600000, 3000], 
      [1355306400000, 4000], 
      [1355487300000, 5000], 
      [1355571900000, 6000] 
     ] 
    }; 
    $.plot($("#flot-bar-chart"), [barData], barOptions); 
}); 

モリス-data.jsファイル：

$(function() { 
Morris.Bar({ 
     element: 'morris-bar-chart', 
     data: [{ 
      y: '2006', 
      a: 100, 
      b: 90 
     }, { 
      y: '2007', 
      a: 75, 
      b: 65 
     }, { 
      y: '2008', 
      a: 50, 
      b: 40 
     }, { 
      y: '2009', 
      a: 75, 
      b: 65 
     }, { 
      y: '2010', 
      a: 50, 
      b: 40 
     }, { 
      y: '2011', 
      a: 75, 
      b: 65 
     }, { 
      y: '2012', 
      a: 100, 
      b: 90 
     }], 
     xkey: 'y', 
     ykeys: ['a', 'b'], 
     labels: ['Series A', 'Series B'], 
     hideHover: 'auto', 
     resize: true 
    }); 

}); 

私はそれぞれに別々の色を設定する必要がありますグラフ内の棒グラフ。誰かがこれで私を助けることができますか？チャートをレンダリングした後

事前のおかげで...

Answer 1

、あなたはjqueryのコードでそれを選択し、それに応じて色をチャゲすることができます。

は、chart.jsの1つの例です。

myObjBar.datasets[0].bars[0].fillColor = "green"; 

Answer 2

「データ」プロパティの次に、値がバーに対応する色の配列である「barColors」プロパティを指定する必要があります。たとえば

$(function() { 
Morris.Bar({ 
     element: 'morris-bar-chart', 
     data: [{ 
      y: '2006', 
      a: 100, 
      b: 90 
     }, { 
      y: '2007', 
      a: 75, 
      b: 65 
     }, { 
      y: '2008', 
      a: 50, 
      b: 40 
     }, { 
      y: '2009', 
      a: 75, 
      b: 65 
     }, { 
      y: '2010', 
      a: 50, 
      b: 40 
     }, { 
      y: '2011', 
      a: 75, 
      b: 65 
     }, { 
      y: '2012', 
      a: 100, 
      b: 90 
     }], 
     xkey: 'y', 
     ykeys: ['a', 'b'], 
     barColors: ['#ff0000', '#00ff00'], 
     labels: ['Series A', 'Series B'], 
     hideHover: 'auto', 
     resize: true 
    }); 

});