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也不存在。

chart.js颜色不呈现

1 个答案: