javascript - 如何知道 Chart.js 中水平条的长度
问题描述
我的项目中有一个单杠(我使用chart.js
)。我需要知道它的长度(以像素为单位)。怎么做?
解决方案
您可以使用插件核心 API。它提供了不同的钩子,可用于执行自定义代码。在下面的代码片段中,我使用afterDraw
钩子记录各个条的像素数。
const chart = new Chart(document.getElementById('myChart'), {
type: 'horizontalBar',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
chart.config.data.datasets[0].data.forEach((value, index) => {
console.log('index ' + index + ': ' + Math.round(xAxis.getPixelForValue(value)) + 'px');
});
}
}],
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'By Dataset',
data: [15, 8, 12, 18],
backgroundColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
推荐阅读
- c# - 如何在 c# 函数中声明参数以使用 oracle db 获取输入输出?
- ios - Xamarin iOS:找不到 iPad mini 的模拟器,也没有最新的 iOS 版本 11.4.1
- swift - POD 安装问题:“`ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES”
- nginx - 使用 nginx 代理 S3 请求以进行授权
- reactjs - fetch api 或 whatwg-fetch 是否修改状态码为 304 到 200 的响应?
- python - 如何使用 pandas DataFrame 计算列表的字典?
- mysql - 在计算时间间隔时,有没有办法不改变 varchar 的类型?
- php - 从页面 A 在页面 B 上回显一个变量而不包含
- react-native - React native - 显示启动视频的最佳方式
- amazon-web-services - CircleCi 2.0:未找到 aws 命令