backgroundColorとborderColor barchart unsing Chart.jsを動的に設定する方法

取得した動的データに基づいてbackgroundColorとborderColorを設定しようとしていますが、「スコア」の数値が偶数または奇数の場合は、私はそれを達成する方法を見つけることができません。任意の提案は非常に感謝しています。backgroundColorとborderColor barchart unsing Chart.jsを動的に設定する方法

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>ChartJS - BarGraph</title> 
      <style type="text/css"> 
       #chart-container { 
        width: 800px; 
        height: 600px; 
       } 
      </style> 
      <!-- javascript --> 
    <script type="text/javascript" src="jquery-1.11.min.js"></script> 
    <script type="text/javascript" src="Chart.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function(){ 
    $.ajax({ 
     //url: "test.html", 
     //method: "GET", 

    success: function(data) { 
       // test data 
     var data = [ 
      { 
       "Serverid":"1", 
       "score":"37" 
      }, 
      { 
       "Serverid":"2", 
       "score":"60" 
      }, 
      { 
       "Serverid":"3", 
       "score":"35" 
      }, 
      { 
       "Serverid":"4", 
       "score":"41" 
      }, 
      { 
       "Serverid":"5", 
       "score":"50" 
      }, 
       { 
       "Serverid":"6", 
       "score":"70" 
      } 
      // ... it can be more than that 
      ]; 
     var Server = []; 
     var score = []; 

     for(var i in data) { 
     Server.push("Server " + data[i].Serverid); 
     score.push(data[i].score); 
     } 
    var chartdata = { 

     labels: Server, 
     datasets : [ 

     { 
     label: 'Score I', 

     backgroundColor: [ 

      // even color 
     'rgba(255, 99, 132, 0.2)', 
     // odd color 
      'rgba(75, 192, 192, 0.2)' 

     ], 

     borderColor: [ 
      // even color 
     'rgba(255,99,132,1)', 
     // odd color 
     'rgba(153, 102, 255, 1)' 
     ], 

     borderWidth: 1, 
     hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
     hoverBorderColor: 'rgba(200, 200, 200, 1)', 
     data: score 
     } 
        ] 
    }; 

    var ctx = $("#mycanvas"); 

    var barGraph = new Chart(ctx, { 
        type: 'bar', 
        data: chartdata, 
        options: { 
         scales: { 
          yAxes: [{ 
            ticks: { 
             beginAtZero: true 
             } 
           }] 
          } 
         } 
        }); 
    }, // end success 
    error: function(data) { 
       console.log(data); 
       alert(data); 
       } 
    }); // end ajax 

    }); 

    </script> 
     </head> 
     <body> 

    <br> Test Bar 3 <br> 
      <div id="chart-container"> 
       <canvas id="mycanvas"></canvas> 
      </div> 



    </body> 
    </html>

ありがとう！

出典

2017-03-07 Maresia

バーの背景や境界線の色を動的に設定するのに特別なことはありませんが、色を設定するロジックに依存します。

Per the API、chart.jsはあなたがbackgroundColorとborderColorのためのあなたの棒グラフデータセットに（だけではなく、単純な色の）色の配列で渡すことができます。この配列のインデックスがデータ配列のインデックスにマップされるため、データポイントの色を制御できます。つまり、2番目のデータポイントを青色にしたい場合は、カラー配列の2番目のインデックスに青を挿入します。

ダイナミックデータを繰り返し処理し、ロジックごとにデータ、backgroundColor、およびborderColor配列を作成するだけです（色が交互に変わります）。ここに例があります。ここで

function getData(data) { 
    var dataSize = Math.round(Math.random() * 100); 
    var evenBackgroundColor = 'rgba(255, 99, 132, 0.2)'; 
    var evenBorderColor = 'rgba(255,99,132,1)'; 
    var oddBackgroundColor = 'rgba(75, 192, 192, 0.2)'; 
    var oddBorderColor = 'rgba(153, 102, 255, 1)'; 

    var labels = []; 

    var scoreData = { 
    label: 'Mid-Term Exam 1', 
    data: [], 
    backgroundColor: [], 
    borderColor: [], 
    borderWidth: 1, 
    hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
    hoverBorderColor: 'rgba(200, 200, 200, 1)', 
    }; 

    for (var i = 0; i < dataSize; i++) { 
    scoreData.data.push(window.randomScalingFactor()); 
    labels.push("Score " + (i + 1)); 

    if (i % 2 === 0) { 
     scoreData.backgroundColor.push(evenBackgroundColor); 
     scoreData.borderColor.push(evenBorderColor); 
    } else { 
     scoreData.backgroundColor.push(oddBackgroundColor); 
     scoreData.borderColor.push(oddBorderColor); 
    } 
    } 

    return { 
    labels: labels, 
    datasets: [scoreData], 
    }; 
};

は、私が何を意味するかを実証codepen例です。

これを具体的な例に戻すには、$.ajax成功コールバックからgetData()メソッドを呼び出すだけです（または、私の例の本質をコールバックに直接コピーしてください）。以下は、あなたのコード（あなたの質問から供給されたもの）が上記のgetData()関数を呼び出すように見えるものの例です。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $.ajax({ 
     //url: "test.html", 
     //method: "GET", 
     success: function(data) { 
     var ctx = $("#mycanvas"); 

     // create our chart and pass it the data returned from the ajax request 
     var barGraph = new Chart(ctx, { 
      type: 'bar', 

      // pass the data returned from the ajax request so we can assemble it 
      data: getData(data), 
      options: { 
      scales: { 
       yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
       }] 
      } 
      } 
     }); 
     }, // end success 
     error: function(data) { 
     console.log(data); 
     alert(data); 
     } 
    }); // end ajax 
    }); 
</script>

それともあなたのコードにマッピングされたソリューションを示すこの他のexampleを見てみましょう。

出典

2017-03-07 22:22:16 jordanwillis

こんにちはJordan、あなたが投稿したコードで投稿したコードをどのように実装できるかはわかりません。私は私が必要とするすべてのデータをプッシュしますchardata varではチャットの属性を設定し、barGraphではYAxesを0から始めるように設定しました。あなたの "getData（）あなたの応答！ – Maresia

実際には非常に単純です。修正された答えを参照してください – jordanwillis

これはうまくいきました！ "ラベル"の値に奇妙な問題がありました： "日付"： "2015-11-01 21 ：00：05.423 "、それはそのバーの下に最初のものを表示し、次のものをスキップするなど何かアイデア？ありがとうございました！ – Maresia

backgroundColorとborderColor barchart unsing Chart.jsを動的に設定する方法

答えて

関連する問題