chart.js颜色不呈现
问题描述:
我想使用chart.js来创建一个简单的活动线/散点图,z-indexed作为我的应用程序的背景。出于某种原因,它呈现为不透明的灰色,而不是我指定的微红色。而且,即使我尝试更改其他图表元素和默认值,图表始终为灰色。我相信这是一个微不足道的解决方案,但我无法弄清楚。 (你需要在图表有任何数据显示之前设置并启动计时器)另外,更具体地说,这是与以下代码相关的JS代码:创建图表:chart.js颜色不呈现
var ctx = document.getElementById('canvas').getContext("2d"),
points = [{x:0,y:0}],
lineData = {
datasets: [{
fillColor: "rgba(217, 108, 99, .9)",
strokeColor: "rgba(255, 255, 255, 1)",
pumpntHighlightStroke: "rgba(220,220,220,1)",
data: points
}]
},
lineOptions = {
showScale: false,
scaleShowLabels: false,
scaleShowGridLines : false,
pointDot : false,
pointDotRadius : 0,
pointDotStrokeWidth : 0,
pointHitDetectionRadius : 0,
datasetStroke : true,
datasetStrokeWidth : 3,
datasetFill : true,
};
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.animation.duration = 250;
Chart.scaleService.updateScaleDefaults('linear', {
display: false,
ticks: {
beginAtZero: true,
min: 0
}
});
Chart.defaults.global.elements.line.tension = 0.05;
Chart.defaults.global.maintainAspectRatio = false;
myChart = new Chart(ctx, {
type: 'scatter',
data: lineData,
options: lineOptions
});
谢谢你的时间。请让我知道是否还有其他事情可以解释。
答
我认为这是因为你没有使用正确的属性。根据文档(http://www.chartjs.org/docs/),您应该使用backgroundColor
,而不是fillColor
。
看看第一个例子在doc:http://www.chartjs.org/docs/#getting-started-creating-a-chart
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
注意strokeColor
不存在藏汉。
难道就这么简单!当然,它可以!这是我的误解,'backgroundColor'和'fillColor'是相互排斥的图表选项。但是,他们不是,是吗?谢谢。 –
我不知道,我从来没有使用过chart.js,但我没有发现任何有关fillcolor的文档。 – enguerranws