javascript - chart.js 颜色不渲染

Question

我正在尝试使用 chart.js 创建一个简单的实时折线图/散点图，z-indexed 作为我的应用程序的背景。出于某种原因，它呈现为不透明的灰色，而不是我指定的淡红色。而且，即使我尝试更改其他图表元素和默认值，图表始终是灰色的。我确定这是一个微不足道的修复，但我无法弄清楚。

这里是 JS Bin 的链接具有完整代码。(您需要在图表显示任何数据之前设置并启动计时器)此外，更具体地说，这是与创建图表相关的 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
});

感谢您的宝贵时间。如果还有什么我可以解释的，请告诉我。

Answer 1

我认为这是因为您没有使用正确的属性。根据文档 ( http://www.chartjs.org/docs/ )，您应该使用 backgroundColor，而不是 fillColor。

请参阅文档中的第一个示例: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 也不存在。