我正在尝试根据我得到的动态数据设置backgroundColor和borderColor，如果“得分”数字是偶数或奇数我也试图替换颜色我无法找到完成它的方法。任何建议都非常感谢。
<!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>
谢谢！
答案 0 :(得分：1)
public class TheServerController : Controller
{
public ActionResult Index()
{
return View();
}
//Json Function To Call The Data
public JsonResult DummyServerData()
{
List<TheServer> allDummyServers = ServerRepository.GetAllServers();
Chart _chart = new Chart();
//Create And Load Server-Names-Array
_chart.labels = allDummyServers.Select(x => x.ServerId).ToArray();
//Create Scores-Array
int[] scores = allDummyServers.Select(x => x.Score).ToArray();
//Create An Empty-Colors-Array With The Same Size As Scores.Count
string[] colours = new string[scores.Length];
for (int i = 0; i < scores.Length; i++)
{
//Load The Colours-Array With As Per Index(i) Of The Scores-Array
//By Calling The Coloring Function From Repository
colours[i] = ServerRepository.GetColourStringNameBasedOnScore(scores[i]);
}
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new List<Datasets>();
_dataSet.Add(new Datasets()
{
label = "Server Scores",
data = scores,// Adding The Scores To Dataset
backgroundColor = colours,// Adding The Colours To Dataset
borderWidth = "1"
});
_chart.datasets = _dataSet;
return Json(_chart, JsonRequestBehavior.AllowGet);
}
}
答案 1 :(得分：0)
动态设置条形背景和边框颜色并没有什么特别之处，这一切只取决于您想用来设置颜色的逻辑。
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示例。
现在，要将此映射回您的具体示例，您只需在getData()成功回调中调用$.ajax方法（或者直接将我的示例的精华直接复制到您的回调中）。以下是您的代码（从您的问题中提供）看起来像调用上述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。