javascript - 使用 Chart.js 在直方图中放大功能
问题描述
我使用chart.js 创建了一个直方图。(参考在 Chart.js 中制作直方图)。现在我需要一个放大功能,因为默认情况下,如果我启用放大图表标签和条形图不同步。而且我的数据在图表中太多了。所以我需要条的宽度。这是我的配置对象。
const config: any = {
type: 'bar',
data: {
labels: xLabelx,
datasets: [ { label: 'Count', backgroundColor: 'rgba(215, 239, 252,0.5)', data: NumberOfVehicle,
borderColor: '#37B1F0', borderWidth: 0.5, hoverBackgroundColor: '#66bcff' } ]
},
options: {
tooltips: {
mode: 'label',
bodyFontSize: 12,
opacity: 0.5,
borderWidth: 5,
callbacks: {
title: (tooltipItems, data) => { return ''; },
label(tooltipItem, data) {
const label = data.datasets[tooltipItem.datasetIndex].label;
const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ': ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '');
} } },
pan: { enabled: true, mode: 'xy', drag: true, speed: 10, threshold: 10 },
zoom: { enabled: true, drag: false, mode: 'x' },
maintainAspectRatio: false,
responsive: false,
legend: {
display: true,
onHover: (event, legendItem) => { document.getElementById('myChart').style.cursor = 'pointer'; },
labels: { fontSize: 14 }},
hover: {
onHover: (e, el) => { $('#myChart').css('cursor', el[0] ? 'pointer' : 'default'); }
},
scales: {
xAxes: [
{ display: false, barPercentage: 1.25, ticks: { max: xLabelx[xLabelx.length - 2] }},
{ display: false, ticks: { autoSkip: false, max: xLabelx[xLabelx.length - 1]}},
{ scaleLabel: { display: true, labelString: 'Range', fontFamily: 'Roboto', fontSize: 14 }}
],
yAxes: [
{ scaleLabel: { display: true, labelString: 'No. of model', fontFamily: 'Roboto', fontSize: 14 },
ticks: { beginAtZero: true, fontSize: 12, userCallback: (label, index, labels) => {
if (Math.floor(label) === label && label >= 0) { return label; } } } } ]
}
}
};
解决方案
推荐阅读
- rust - 多个 actix-web 客户端请求 - 预期 struct actix_web::Error found ()
- docker - 我应该在 Hadoop 中使用哪个 docker 容器?
- selenium-webdriver - 机器人框架测试在 Edge webdriver 上失败
- hl7 - 需要在 JAVA 中使用 HAPI 解析 HL7 消息
- php - 如何通过唯一ID组合对象的php数组?
- reactjs - 使用 React 的 useState 钩子时输入可空状态的正确方法
- javascript - 过滤后保持对象为对象
- c++ - 使用 libsndfile 获取音频持续时间
- ionic-framework - Ionic Native Http Client - 一些 UTF8 字符破坏 response.data
- android - 清单合并失败,出现多个错误123