漸變顏色條形圖每個酒吧使用ChartJS

我試圖用ChartJS創建一個條形圖，這將是這樣的：漸變顏色條形圖每個酒吧使用ChartJS

我想知道我怎麼能添加漸變根據它們的高度，和各自的各的顏色。

我發現了一個非常接近的解決方案here，但它爲整個圖表設置了createLinearGradient，而不是單個條形圖。

另外，this解決方案更接近，如果我爲每個小節創建漸變，但是接下來，我想根據小節高度設置漸變。

有沒有一種方法根據鋼筋高度指定stopPoints，而不是<canvas />元素上的座標？

或者也許一種方式根據特定的酒吧高度計算圖座標？

感謝提前:)

來源

2017-04-26 Anubhav Dhawan

爲了讓看起來像在您提供的樣本圖像，你可以使用堆積條形圖有三個數據集的效果。看看代碼，看看我的意思。

var bar_ctx = document.getElementById('bar-chart').getContext('2d'); 
 

 
var bar_chart = new Chart(bar_ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["1", "2", "3", "4", "5", "6"], 
 
    datasets: [{ 
 
     label: 'test0', 
 
     data: [3, 4, 7, 3, 6, 2], 
 
     backgroundColor: 'deepskyblue', 
 
     }, { 
 
     label: 'test1', 
 
     data: [2, 9, 3, 3, 4, 8], 
 
     backgroundColor: 'skyblue' 
 
     }, 
 
     { 
 
     label: 'test2', 
 
     data: [2, 9, 3, 3, 4, 8], 
 
     backgroundColor: 'powderblue' 
 
     } 
 
    ] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     yAxes: [{ 
 
     stacked: true, 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }], 
 
     xAxes: [{ 
 
     stacked: true, 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
 

 
<canvas id="bar-chart"></canvas>

來源

2017-04-28 12:34:50 woody

是的，找到了答案前面卻忘了張貼在這裏。無論如何感謝：D –

對於任何有興趣的人，這裏是上述代碼的JSFiddle：https://jsfiddle.net/xk7gj2xy/ –

漸變顏色條形圖每個酒吧使用ChartJS

回答

相關問題