Попытка обновить цвет фона на chart.js

Question

Попытка обновить цвет фона на chart.js

1

может кто-то помочь мне с фиксацией цветов моего графика, кажется, что он не принимает детали, включенные в него

HTML

<html>
    <head>
        <script src="/jquery.min.js"></script>
    </head>
    <body>
        <h1>Live Updating Chart.js</h1>

        <canvas id="myChart" width="800" height="700"></canvas>


    </body>
</html>

JS

$(document).ready(function(){
  var count = 10;
  var data = {
      labels : ["1","2","3","4","5", "6", "7", "8", "9", "10"],
        datasets : [
             {
             // backgroundColor: '#8bd600',
             // fillColor : "rgba(220,220,220,0.5)",
             // strokeColor : "rgba(220,220,220,1)",
             // pointColor : "rgba(220,220,220,1)",
             // pointStrokeColor : "#fff",
             data : [0]
             },
             {
            backgroundColor: '#8bd600',
            pointBackgroundColor: '#8bd600',
            borderWidth: 1,
            borderColor: '#ffffff',
                data : [28,48,40,19,96,87,66,97,92,85]
             }
        ]
  }
  // this is ugly, don't judge me
  var updateData = function(oldData){
    var labels = oldData["labels"];
    var dataSetA = oldData["datasets"][0]["data"];
    var dataSetB = oldData["datasets"][1]["data"];

    labels.shift();
    count++;
    labels.push(count.toString());
    var newDataA = dataSetA[9] + (20 - Math.floor(Math.random() * (41)));
    var newDataB = dataSetB[9] + (20 - Math.floor(Math.random() * (41)));
    dataSetA.push(newDataA);
    dataSetB.push(newDataB);
    dataSetA.shift();
    dataSetB.shift();    
  };

  var optionsAnimation = {
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : 20,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : 10,
    //Number - The scale starting value
    scaleStartValue : 0
  }

  // Not sure why the scaleOverride isn't working...
  var optionsNoAnimation = {
    animation : false,
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : true,
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : 1,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : 1,
    //Number - The scale starting value
    scaleStartValue : 0
  }

  //Get the context of the canvas element we want to select
  var ctx = document.getElementById("myChart").getContext("2d");
  var optionsNoAnimation = {animation : false}
  var myNewChart = new Chart(ctx);
  myNewChart.Line(data, optionsAnimation);  

  setInterval(function(){
    updateData(data);
    myNewChart.Line(data, optionsNoAnimation)
    ;}, 750
  );
});

Я пытаюсь получить этот дизайн

проблема возникает при цвете фона, не принимающем черный

Вы можете проверить его версию здесь. Https://codepen.io/thisisasample001/pen/NgKKJm

shifu 01 июнь 2017, в 12:55

Источник

Теги:

javascript

chart.js

charts

1 ответ

Ещё вопросы

ɢʀᴜɴᴛ · Accepted Answer · 2017-06-01T08-33-00.000Z

Поскольку в ChartJS нет родного способа изменения цвета фона диаграммы, следовательно, вам нужно будет сделать некоторый стиль css, чтобы выполнить так...

#myChart {
  background-color: #22293d;
}

Кроме того, если вы хотите, чтобы цвет заливки графа соответствовал цвету фона диаграммы, вам необходимо установить свойство datasetFill в false в параметрах диаграммы...

var optionsNoAnimation = {
   datasetFill: false,
   ...
}

Вот рабочая демонстрация на JSFiddle

Я приму этот ответ, но могу ли я спросить, как сделать линию графика белым, а цвет ее заливки будет таким же, как цвет фона? Мне нужно скопировать точный цвет графика выше, вы можете мне помочь? мне очень жаль, я немного запутался
для этого вам нужно установить datasetFill: false в настройках диаграммы, см. jsfiddle.net/t9ypwd5k
большое спасибо за вашу помощь :) я ценю это