2016-10-22 5 views
2

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 
}); 

ありがとうございます。私が説明できるものがあれば教えてください。

答えて

4

これは、正しいプロパティを使用していないためだと思います。ドキュメント(http://www.chartjs.org/docs/)によれば、ではなく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ことがaswell存在しません。

+0

それは簡単だろうか!もちろん、それはできます! 'backgroundColor'と' fillColor'は相互排他的なチャートオプションであると誤解しました。しかし、彼らはそうではありませんか?ありがとう。 –

+0

私は、chart.jsを使ったことはありませんでしたが、ドキュメント内のfillcolorについて何も見つかりませんでした。 – enguerranws

関連する問題