如何动态设置backgroundColor和borderColor条形图解除Chart.js

问题描述：

我想设置backgroundColor和borderColor基于我得到的动态数据，我也试图替换颜色，如果“分数”是偶数或奇数我找不到一种方法来完成它。任何建议非常感谢。如何动态设置backgroundColor和borderColor条形图解除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>

谢谢！

答

动态设置条形背景和边框颜色并没有什么特别的要求，这一切都取决于您想要用什么逻辑来设置颜色。

Per the API，chart.js允许您在条形图数据集中为backgroundColor和borderColor传递一组颜色数组（而不是简单的颜色）。您可以控制数据点颜色，因为此数组中的索引映射到数据数组中的索引。换句话说，如果要将第二个数据点着色为蓝色，则将蓝色插入到颜色数组的第二个索引中。

所以你需要做的就是迭代你的动态数据，并根据你的逻辑（交替的颜色）构建你的数据，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展示映射到你的代码的解决方案。

嗨乔丹，我看不出我如何实现我发布的代码与您发布的代码。我的循环我推我需要的所有数据，在chardata var其中我设置聊天的属性，并在barGraph我设置YAxes从0开始。在哪里可以“getData（）适合那里，谢谢你你的反应！ – Maresia

其实它很简单。看到修改后的答案。 – jordanwillis

它的工作，谢谢！只是有一个奇怪的问题与“标签”的值他们有这种格式：“日期”：“2015-11-01 21 ：00：05.423“，它显示第一个在它的下方，然后跳过下一个等等任何想法？再次感谢！ – Maresia

如何动态设置backgroundColor和borderColor条形图解除Chart.js

相关推荐