如何在Chart.js中动态设置backgroundColor和borderColor条形图
如何在Chart.js中动态设置backgroundColor和borderColor条形图
提问于 2017-03-08 03:26:19
我正在尝试根据我得到的动态数据来设置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>谢谢!
回答 2
Stack Overflow用户
发布于 2018-08-02 07:20:30
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);
}
}Stack Overflow用户
发布于 2017-03-08 06:22:17
动态设置条的背景和边框颜色并不需要什么特别的东西，这完全取决于您想要使用什么逻辑来设置颜色。
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，它显示了映射到您的代码的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42656662
复制相关文章
相似问题