先程質問したばかりですが、再びお願いします。
【質問】
chart.jsで表示した棒グラフの色をグラデーションにしたいと考えております。
グラデーションの仕方は、下から上にいくにつれて明るくする形にしたいと考えております。
その場合、どのように記述すればよろしいでしょうか。
他サイトをいくつか参照しやってみましたが、うまくいきません。
教えていただければ幸いです。
記述は以下の通りとなります。
※graph.phpを作り、そこに記述している。
<canvas id="sample" width="380" height="330" style="display: block;"></canvas> <script> var $value = <?php echo $value; ?>; var ctx = document.getElementById("sample").getContext('2d'); var sample = new Chart(ctx, { type: 'bar', title: "◯◯", data: { labels: [["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"]], datasets: [{ label: '◯◯', lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: '◯◯', lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, ] }, options: { responsive: false, legend: { display: false }, scales: { yAxes: [{ ticks: { stepSize: 25, beginAtZero: true, min: 0, max: 100, display:false }, gridLines: { drawTicks:false, drawBorder:false, lineWidth:2, borderDash:[8,8], color:'black', } }], xAxes: [{ categoryPercentage: 1.0, barPercentage: 0.7, ticks: { fontColor:'white', fontFamily:'ほげほげ', fontSize:16 }, gridLines: { display:false } }] } } }); </script>
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/22 01:24