移动 y 轴并隐藏在 Chart.JS V3 中

Question

所以我创建了这个图表，我试图移动轴，所以Dark red在左边，显示Blue和条形图的子部分，但我在移动dark red时遇到了问题到这个graf的右侧。 我确实尝试使用position: 'right' ，但没有任何改变。

我试图让它看起来像这样：

但我只能得到这个：

 var canvas = document.createElement('canvas'); div = document.getElementById('container'); canvas.id = "myChart"; canvas.style.zIndex = 8; div.appendChild(canvas); const labels = [ '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7' ]; const data = { labels: labels, datasets: [{ label: 'Red', backgroundColor: 'rgb(255,0,0)', borderColor: 'rgb(255,0,0)', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Yellow', backgroundColor: 'rgb(255,255,0)', borderColor: 'rgb(255,255,0)', data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Orange', backgroundColor: 'rgb(255,159,64)', borderColor: 'rgb(255,159,64)', data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Grey light', backgroundColor: 'rgb(224,224,224)', borderColor: 'rgb(224,224,224)', data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Blue', backgroundColor: 'rgb(30,144,255)', borderColor: 'rgb(30,144,255)', data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328], stack: 'combined_first', yAxisID: 'GreyDaBlue', order: 1 }, { label: 'Dark Red', backgroundColor: 'rgb(165,42,42)', borderColor: 'rgb(165,42,42)', data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45], stack: 'combined_second', yAxisID: 'DarkR', order: 2 }, { label: 'Dark Grey', backgroundColor: 'rgb(80,80,80)', borderColor: 'rgb(80,80,80)', data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], stack: 'combined_third', yAxisID: 'GreyDaBlue', order: 3 } ] }; const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'WDC History Chart' }, zoom: { zoom: { wheel: { enabled: true, }, pinch: { enabled: true }, drag: { enabled: true }, mode: 'x', } } }, scales: { y: { stacked: true } } }, }; const myChart = new Chart( document.getElementById('myChart'), config );

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="container" class="wdc-canvas-size"> </div>

那么如何将Dark Red y 轴移到右侧呢？

Answer 1

我可以像这样使用DarkR scales和right

 var canvas = document.createElement('canvas'); div = document.getElementById('container'); canvas.id = "myChart"; canvas.style.zIndex = 8; div.appendChild(canvas); const labels = [ '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7' ]; const data = { labels: labels, datasets: [{ label: 'Red', backgroundColor: 'rgb(255,0,0)', borderColor: 'rgb(255,0,0)', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Yellow', backgroundColor: 'rgb(255,255,0)', borderColor: 'rgb(255,255,0)', data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Orange', backgroundColor: 'rgb(255,159,64)', borderColor: 'rgb(255,159,64)', data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Grey light', backgroundColor: 'rgb(224,224,224)', borderColor: 'rgb(224,224,224)', data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Blue', backgroundColor: 'rgb(30,144,255)', borderColor: 'rgb(30,144,255)', data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328], stack: 'combined_first', yAxisID: 'GreyDaBlue', order: 1 }, { label: 'Dark Red', backgroundColor: 'rgb(165,42,42)', borderColor: 'rgb(165,42,42)', data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45], stack: 'combined_second', yAxisID: 'DarkR', order: 2 }, { label: 'Dark Grey', backgroundColor: 'rgb(80,80,80)', borderColor: 'rgb(80,80,80)', data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], stack: 'combined_third', yAxisID: 'GreyDaBlue', order: 3 } ] }; const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'WDC History Chart' }, zoom: { zoom: { wheel: { enabled: true, }, pinch: { enabled: true }, drag: { enabled: true }, mode: 'x', } } }, scales: { y: { stacked: true }, DarkR: { position: 'right', // `axis` is determined by the position as `'y'` } } }, }; const myChart = new Chart( document.getElementById('myChart'), config );

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="container" class="wdc-canvas-size"> </div>