は、誰かが私のチャートの色を固定で私を助けることができるchart.js

の背景色を更新しようとすると、それはそれは細部を受け入れていないようだが、それには、誰かが私のチャートの色を固定で私を助けることができるchart.js

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

出典

2017-06-01 gio_gio

するvar CTX =のdocument.getElementByIdが（あります"myChart"）; ctx.style.backgroundColor = 'rgba（0,0,0,255）'; https://stackoverflow.com/a/38493678/1544886 –

https://codepen.io/anon/pen/WOevog?editors=0010 –

それを実行しているバージョンを確認することができ、背景色が黒

を受け入れないで発生しますChartJS、したがって、あなたはとても達成するために、いくつかのCSSスタイルをしなければならないでしょう...さらに

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

、あなたがグラフをしたい場合さん塗りつぶしの色、その後チャートの背景色を一致させるために、あなたのチャートオプションでfalseにdatasetFillプロパティを設定する必要があります...

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

ここworking demo on JSFiddle

出典

2017-06-01 10:17:09

この回答を受け入れることにしますが、どのようにしてグラフは白で、その塗りつぶし色は背景色と同じですか？私は上記のグラフの正確な色をコピーする必要があります、あなたは私を助けることができますか？本当にごめんなさい。 –

あなたのグラフオプションで 'datasetFill：false'を設定する必要があることについては、少し混乱しています。https://jsfiddle.net/t9ypwd5k/ –

ありがとうございました。私はそれに感謝します。 –

は、誰かが私のチャートの色を固定で私を助けることができるchart.js

答えて

関連する問題