chart.jsを使用して簡単なライブライン/散布図を作成しようとしています。私のアプリの背景として機能するようにインデックスされています。何らかの理由で、私が指定した赤い色ではなく、不透明な灰色の色としてレンダリングされます。そして、他のチャート要素やデフォルトを変更しようとしたとしても、グラフは常にグレーです。私はそれが簡単な修正だと確信していますが、私はそれを把握することはできません。chart.jsの色がレンダリングされない
完全なコードを持つJS Binへのリンクです(グラフを表示する前にタイマーを設定して開始する必要があります)。具体的には、これはグラフを作成する:
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
});
ありがとうございます。私が説明できるものがあれば教えてください。
それは簡単だろうか!もちろん、それはできます! 'backgroundColor'と' fillColor'は相互排他的なチャートオプションであると誤解しました。しかし、彼らはそうではありませんか?ありがとう。 –
私は、chart.jsを使ったことはありませんでしたが、ドキュメント内のfillcolorについて何も見つかりませんでした。 – enguerranws