如何解决散点图的中心原点
我阅读了文档,并在Google上进行了搜索,但是找不到找到原点居中的方法。
我想要的是中间有(0,0),黑点位于右上角(或多或少)。
有可能这样做吗?
解决方法
设置轴的最小和最大范围,以使它们从负向正延伸。这会将(0,0)放在中间。
下面的示例代码:
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx,{
type: 'scatter',data: {
datasets: [{
label: 'Data One',borderColor: 'black',backgroundColor: 'black',data: [{
x: 7,y: 27,}],},options: {
scales: {
xAxes: [{
ticks: {
min: -30,max: 30,],yAxes: [{
ticks: {
min: -30,});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
,
您可以使用Plugin Core API来提供一系列可以用于执行自定义代码的挂钩。例如,在beforeDraw
中,您可以计算和设置两个轴的ticks.padding
,以便将ticks
移动到所需位置。
beforeDraw: chart => {
var xAxis = chart.scales['x-axis-1'];
var yAxis = chart.scales['y-axis-1'];
const scales = chart.chart.config.options.scales;
scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
}
请查看下面的可运行代码,并查看其工作原理。
new Chart('myChart',plugins:[{
beforeDraw: chart => {
var xAxis = chart.scales['x-axis-1'];
var yAxis = chart.scales['y-axis-1'];
const scales = chart.chart.config.options.scales;
scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
}
}],data: [{x:7,y:27}],backgroundColor: 'black'
}]
},stepSize: 5,callback: v => v == 0 ? '' : v
},gridLines: {
drawTicks: false
}
}],gridLines: {
drawTicks: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="1" height="1"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。