我有一个显示各种数据点的图表。其中一些数据点的数字较高，有些数据点的数字较低。
低数字（访问）我可以缩放到不同的比例，这个新比例可以放在“X”轴上（它是“Y”轴，然后旋转 90 度）。但问题是：
如何在不调整悬停时标签数据的情况下推断图表上的位置？2 我搜索了 Stackoverflow 和 ChartJS 文档，但不知道如何做到这一点。
我试图使用“其他”轴（在本例中为图表的顶部水平条），以便比例是相对的，并且不需要原始数据编辑，但我无法让它工作，也无法找到这方面的文档。我确信这是可能的，但我不知道如何在哪里。
我发现了这个问题，但这仅与 ChartJS V2 相关。
当前使用的版本是 ChartJS 3.2.1
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022,2021,2020,2019,2018,2017,2016],
datasets: [
{
type: 'line',
label: 'Visits',
data: ["1","7","493","163","467","88","48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10
},
{
type: 'bar',
label: 'Applied',
data: ["486","800","704","1084","532","618","543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1","147","290","521","233","306","271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616","4273","3998","3400","922","1225","1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545', /* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6","13","22","1","34","2","1"],
backgroundColor: '#65ccD3', /* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
}],
yAxes: [{
stacked: true
}]
}
}
}
);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>我尝试按照CHartJS 文档中的示例添加自定义辅助轴，但它并不完全符合我的需要；网格线保留，轴刻度位于“错误”一侧（一个尺寸有两个刻度（底部），另一侧有零刻度（顶部））
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022,2021,2020,2019,2018,2017,2016],
datasets: [
{
type: 'line',
label: 'Visits',
data: ["1","7","493","163","467","88","48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10,
xAxisID:'xTwo'
},
{
type: 'bar',
label: 'Applied',
data: ["486","900","724","1084","532","618","543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1","147","290","511","253","306","271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616","4373","3998","3400","922","1205","1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545', /* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6","23","22","1","4","2","1"],
backgroundColor: '#65ccD3', /* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
}],
yAxes: [{
stacked: true
}],
xTwo: [{
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
drawOnChartArea: false,
ticks: {
display: false
}
}
}]
}
}
}
); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>问题似乎出在规模上；“xTwo”；
xTwo: [{
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
drawOnChartArea: false,
ticks: {
/* trying to even just hide the ticks here fails */
display: false,
}
}
}]
如何修复此问题以隐藏网格线并将刻度放在图表的正确一侧？
您可以在工具提示配置中为此使用自定义标签回调，而且您的比例配置也是错误的。这是V2风格的。对于所有更改，请阅读迁移指南
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
datasets: [{
type: 'line',
label: 'Visits',
data: ["5", "35", "2465", "815", "2335", "440", "240"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10
},
{
type: 'bar',
label: 'Applied',
data: ["486", "800", "704", "1084", "532", "618", "543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1", "147", "290", "521", "233", "306", "271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616", "4273", "3998", "3400", "922", "1225", "1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545',
/* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6", "13", "22", "1", "34", "2", "1"],
backgroundColor: '#65ccD3',
/* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => {
const label = ttItem.dataset.label;
const val = Number(ttItem.raw);
let res = `${label}: ${label === 'Visits' ? val / 5 : val}`;
return res
}
}
}
},
scales: {
x: {
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
},
y: {
stacked: true
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>更新：
您尝试添加第二个比例，在 Chart.js V3 中，所有比例都是它们自己的对象，不再是数组，对于所有更改，请参阅上面链接的迁移指南。更改对象的比例可以解决更新方法中的问题，而无需乘以值：
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
datasets: [{
type: 'line',
label: 'Visits',
data: ["1", "7", "493", "163", "467", "88", "48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10,
xAxisID: 'xTwo'
},
{
type: 'bar',
label: 'Applied',
data: ["486", "900", "724", "1084", "532", "618", "543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1", "147", "290", "511", "253", "306", "271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616", "4373", "3998", "3400", "922", "1205", "1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545',
/* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6", "23", "22", "1", "4", "2", "1"],
backgroundColor: '#65ccD3',
/* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
x: {
stacked: true,
ticks: {
stepSize: 1000
},
beginAtZero: true
},
y: {
stacked: true
},
xTwo: {
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
ticks: {
display: false
}
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>