Question

有人可以帮我修复我的图表的颜色，似乎它不接受其中包含的细节

HTML

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/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

查看其正在运行的版本

Answer 1

因为，在ChartJS中没有改变图表背景颜色的原生方式，因此，你必须做一些css样式才能完成......

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

另外，如果您希望图形的填充颜色与图表的背景颜色匹配，则需要将datasetFill属性设置为{{ 1}}在你的图表选项...

false

以下是working demo on JSFiddle

尝试更新chart.js上的背景颜色

1 个答案: