Блог

Главная - Вопросы по программированию - chart.js цвет не отображается

chart.js цвет не отображается

#javascript #chart.js

#javascript #chart.js

Вопрос:

Я пытаюсь использовать chart.js чтобы создать простую линейную диаграмму в реальном времени / точечную диаграмму с z-индексом, которая будет служить фоном для моего приложения. По какой-то причине он отображается непрозрачным серым цветом вместо указанного мной красноватого. И, несмотря на то, что я пытался изменить другие элементы диаграммы и значения по умолчанию, диаграмма всегда серая. Я уверен, что это тривиальное исправление, но просто я не могу в этом разобраться.

Вот ссылка на JS-файл, содержащий полный код.(Вам нужно будет установить и запустить таймер, прежде чем на графике появятся какие-либо данные для отображения) Также, более конкретно, это 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
});

Спасибо, что уделили мне время. пожалуйста, дайте мне знать, если есть что-то еще, что я могу объяснить.

Ответ №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 также не существует.

Комментарии:

1. Может ли это быть так просто! Конечно, это возможно! Я неправильно понял, что backgroundColor и fillColor были взаимоисключающими параметрами диаграммы. Но это не так, не так ли? Спасибо.

2. Я не знаю, я никогда не использовал chart.js , но я ничего не нашел о fillcolor в документе.

3. Здесь стоит отметить, что ключи данных ( backgroundColor ) чувствительны к регистру. Я целую вечность задавался вопросом, почему Backgroundcolor: #ff5666, не работает

4. Мы используем свойства, так что, да, регистр имеет значение.