我试着制作一个图表,沿着x轴是年份,y轴是美元金额。我终于接近了我所寻找的,但我发现,因为x坐标是数字,ChartJS是把逗号在他们看起来真的很奇怪的年份。
经过一番研究,我使用了callbacks.options.plugin.tooltip.callbacks.label
,它可以让我删除工具提示中的逗号,但是当我使用options.scales.x[0].ticks.callback
尝试修复底部的标签时,它不仅不起作用,但是我没有看到console.log
语句,所以它看起来甚至没有调用回调。根据我在网上和Stack Overflow上找到的内容,我尝试了几种不同的回调方法,我认为这与ChartJS在不同版本中执行此操作的不同方式相对应。(我使用的是3.5.1版本。)
然后,我意识到...... options.scales
下的选项似乎都没有任何效果。我更改min、标题、刻度设置(颜色为红色、回调等),它们都没有任何效果。(这也解释了为什么我在使用折线图时遇到麻烦,不得不切换到散点图;显然,当我将其设置为type: 'date'
或其他确切的工作方式时,type: 'linear'
并没有被选中,也没有做任何不同的事情。)
与此同时,其他选项,如options.showLine
或options.elements
确实有影响,我看到了图表,但在控制台中没有得到任何错误。因此,它选择了这些选项,只是忽略了我在options.scales
中的所有内容。
下面是相关代码:
// Sample data added to make this example self-contained
// This is my internal data format
let data = {
"Series1": [ {x: 2001, y: 100 }, {x: 2002, y: 110 }, {x: 2003, y: 107 }, ],
"Series2": [ {x: 2001, y: 107 }, {x: 2002, y: 102 }, {x: 2004, y: 95 }, ],
}
// Define data //////////////////////////////////////////////////////
// I convert data to format ChartJS wants and add a few options
let datasets = [];
for(let label in data) {
let c = colorIterator.next().value
datasets.push({
label: label,
data: data[label],
backgroundColor: c,
borderColor: c,
});
}
// Define options //////////////////////////////////////////////////////
let chartConfig = {
type: 'scatter',
data: { datasets: datasets, },
options: {
title: { display: false },
indexAxis: 'x', responsive: true, maintainAspectRatio: false,
showLine: true,
elements: {
line: { display: true, tension: 0, borderWidth: 1, fill: false, },
point: { radius: 3 }
},
interaction: { mode: 'x', },
scales: {
x: [{
type: 'linear',
min: 1995, max: (new Date()).getFullYear()+1, stepSize: 1,
title: { display: true, text: 'Year' },
ticks: {
display: true,
major: { enabled: true },
color: 'red',
callback: function(value, index, ticks) {
console.log(value);
return Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks])
.replace(",","");
}
}
}],
y: [{
title: { display: true, text: '$' },
ticks: {
display: true,
color: 'red',
},
}],
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if(label) {
let x = context.label.replace(",","");
let y = context.formattedValue;
return 'Year ' + x + ' "' + label + '": $' + y;
} else { return 'x'; }
},
},
},
},
}
};
// MAKE CHART //////////////////////////////////////////////////////
let mainChart = new Chart(document.getElementById(c.id), chartConfig);
1条答案
按热度按时间rqqzpn5f1#
如docs中所述,刻度不是数组。所有刻度都是刻度对象中的对象。
因此,您需要将代码更改为: