图表.js：如何根据逐笔报价之间的距离计算标签偏移？
Chart.jsv2.7.1使用Chrome。链接到示例是https://codepen.io/anon/pen/opbvQZ
如何设置标签Offset，这取决于刻度之间的距离，因此调整大小后标签不再位于中心（尽管小提琴显示数字轴，但修复也适用于类别类型轴也很重要）
对于上下文，我试图将x轴和y轴的轴标签居中放在一个气泡图上，该气泡图与浏览器窗口的大小调整反应。
密码
超文本标记语言；
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
</html>
金士;
var data = {
datasets: [
{
label: 'Dataset 1',
data: [
{
x: 2.5,
y: 2.5,
r: 15
},
{
x: 4.5,
y: 4.5,
r: 5
},
{
x: 5.5,
y: 1.5,
r: 10
}
],
},
{
label: 'Dataset 2',
data: [
{
x: 3.5,
y: 2.5,
r: 40
},
{
x: 1.5,
y: 2.5,
r: 3
}
],
}
]
};
var options = {
elements: {
points: {
borderWidth: 1,
borderColor: 'rgb(0, 0, 0)'
}
},
scales:{
xAxes:[{
ticks: {
labelOffset: 50,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'X Axis',
fontSize: 16,
padding: 8
},
}],
yAxes: [{
ticks: {
labelOffset: -50,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Y Axis',
fontSize: 16,
padding: 8
},
}]
},
};
var ctx = document.getElementById("myChart");
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: options
});
共有1个答案
这个问题在Github上得到了jcopperfield的有效回答；
// centre x-scale label
var xScale = myBubbleChart.scales['x-axis-0'];
var xLabelOffset = (xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2;
myBubbleChart.options.scales.xAxes[0].ticks.minor.labelOffset = xLabelOffset;
// centre y-scale label
var yScale = myBubbleChart.scales['y-axis-0'];
var yLabelOffset = (yScale.getPixelForTick(0) - yScale.getPixelForTick(1)) / 2;
myBubbleChart.options.scales.yAxes[0].ticks.minor.labelOffset = yLabelOffset;
// update chart
myBubbleChart.update();
-
本文向大家介绍php如何计算两坐标点之间的距离，包括了php如何计算两坐标点之间的距离的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了php计算两坐标点之间距离的实现代码，供大家参考，具体内容如下 地球上两个点之间，可近可远。 当比较近的时候，可以忽略球面因素，当做是一个平面，这样就有了两种计算方法。 小编再为大家分享一段php坐标之间距离的求解代码： 以上就是本文的全部内容，希望对
-
问题内容： 我有一个文本文件，如下所示 我想计算两个α碳原子之间的距离，即计算第一个和第二个原子之间的距离，然后计算第二个和第三个原子之间的距离，依此类推.....两个原子之间的距离可以表示为： 7,8和9列分别代表x，y和z坐标。我需要打印距离和对应的残基对（第4列），如下所示（距离的值不是实数） 如何使用Perl或python进行此计算？ 问题答案： 如果您的数据用空格隔开，那么简单就可以完成
-
我试图使用Scala类计算两点之间的距离。但它给出了一个错误说 类型不匹配；发现：其他。需要类型（具有基础类型点）：？{def x:？}请注意，隐式转换不适用，因为它们是不明确的：在[A]（x:A）类型的对象Predef中确保[A]的方法any2Ensuring和在[A]（x:A）“ArroAssoc[A]类型的对象Predef中的方法Ani2ArrowasSoc都是可能的其他转换函数。输入到？{
-
我使用行人库（使用ps源、ping Goto和ps汇），想要模拟人行道环境。这个模型的目标是得到行人之间的距离小于1m的数据。所以，我尝试计算行人之间的距离。在Any逻辑中，可以通过使用getX（）、getY和getId（可以每秒计算）来收集行人的信息。但是我不知道如何选择行人代理并计算它们之间的距离。我的意思是，如果有10个行人（id：1, 2, 3...)，如何每秒钟获得1和2、1和3、2和3
-
问题内容： 我需要创建一个类来计算两点之间的距离。我被困住了，我是一个完全的初学者。这是我的课程： 第二课。 我不确定如何在两个定义的点之间获取点对象（中间点）。 我可以创建点对象，但不确定如何通过位于这两个点对象之间的方法返回点对象。 问题答案： 平面上的两个点（x1，y1）和（x2，y2）之间的距离为： 但是，如果您想要的只是两个点的中点，则应将中点函数更改为： 这将返回一个全新的点对象，其点
-
本文向大家介绍顶点之间的距离和偏心距，包括了顶点之间的距离和偏心距的使用技巧和注意事项，需要的朋友参考一下 两个顶点之间的距离 它是顶点U和顶点V之间最短路径中的边数。如果有多个路径连接两个顶点，则最短路径被视为两个顶点之间的距离。 表示法-d(U,V) 从一个顶点到另一顶点可以有任意数量的路径。其中，您只需要选择最短的一个即可。 示例 看一下下图- 在这里，从顶点“ d”到顶点“ e”或简称“