[英]How to align vertical axis area on two charts in chart.js
在 chart.js 中，我想要 2 個圖表（一個在另一個下面），並同步了報價。 目前看起來是這樣
如您所見，日期未對齊。 在這里設置相等的最小-最大值是不可能的，因為值差異太大。
我認為解決方案是為兩個 y 軸設置相等的寬度。 上圖中的第二個 y 軸使情況變得復雜，但是否可以在底部圖表上放置一個空的右刻度？
我目前對頂級圖表的選擇是
options: {
tooltips: {
enabled: true,
trigger: 'axis',
intersect: false,
mode : 'index'
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
// left: 500,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
xAxes: [
{
boundaryGap : false,
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value.split('.').slice(0,2).join('.');
}
},
},
],
yAxes: [
{
id: keys[0],
position: "left",
gridLines: {
drawBorder: false,
zeroLineColor: "rgba(147, 147, 147, 0.2)",
color: "rgba(147, 147, 147, 0.2)",
},
ticks: {
padding: 20,
fontColor: "#2C71C3",
beginAtZero: false,
},
}, {
id: keys[1],
position: "right",
gridLines: {
drawBorder: false,
color: "rgba(147, 147, 147, 0)",
},
ticks: {
padding: 20,
fontColor: "#C6C6C6",
beginAtZero: false,
},
},
],
},
而對於底部的
options: {
tooltips: {
enabled: true,
trigger: 'axis',
intersect: false,
mode : 'index'
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
// left: 500,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
yAxes: [
{
ticks: {
reverse: true,
},
},
],
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value.split('.').slice(0,2).join('.');
}
},
},
],
},
我不知道如何或者是否有可能為比例定義寬度，但你可以做的是在右側添加第二個 Y 軸，禁用網格，回調返回幾個空格作為間距
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ position: 'left' }, { position: 'right', gridLines: { display: false }, ticks: { callback: () => (' ') } } ] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>
晚會有點晚，但可以設置固定寬度。 我用一個例子更新了@LeeLenalee 片段（在這種情況下，兩個 y 軸的寬度都是 100px）。 這樣，就可以毫無問題地對齊兩個圖形。 不過，請確保為標簽設置的寬度不要太小！
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ position: 'left', afterFit: (scaleInstance) => scaleInstance.width = 100, }, { position: 'right', afterFit: (scaleInstance) => scaleInstance.width = 100, gridLines: { display: false }, ticks: { callback: () => '' } } ] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>
如何對齊垂直網格線上的 X 軸刻度（Chart.js、條形圖）
[英]How to align X-Axis ticks on vertical gridlines (Chart.js, Bar-Chart)
旋轉帶有兩個數據點的chart.js餅圖以在水平軸上對齊兩個扇區
[英]Rotating a chart.js pie chart with two datapoints to align both sectors on horizontal axis
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.