Fatal编程技术网

Chart.js x轴小数

chart.js

Chart.js x轴小数,chart.js,Chart.js,我正在尝试使用chart.js创建一个折线图，其中数据集中的数据包含点： data: [{x:0,y:5},{x:2.1,y:4.3},{x:3.9,y:3}] 这些点的x值包含小数。生成的图表如下所示： 它不是在（2.1 | 4.3）处显示第二个数据点，而是在（1 | 4.3）处绘制 有人能给我指出这条路的正确方向吗 复制此行为的代码： <body> <div> <canvas id="myChart" width

我正在尝试使用chart.js创建一个折线图，其中数据集中的数据包含点：

data: [{x:0,y:5},{x:2.1,y:4.3},{x:3.9,y:3}]
这些点的x值包含小数。生成的图表如下所示：

它不是在
（2.1 | 4.3）
处显示第二个数据点，而是在
（1 | 4.3）
处绘制

有人能给我指出这条路的正确方向吗

复制此行为的代码：

<body>
    <div>
        <canvas id="myChart" width="400" height="200"></canvas>
    </div>
    <script>
        var ctx = document.getElementById('myChart');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [0.0, 1.0, 2.0, 3.0, 4.0, 5.0],
                datasets: [{
                    label: 'some label',
                    data: [{x:0,y:5},{x:2.1,y:4.3},{x:3.9,y:3}],
                    borderColor: 'red',
                    fill: false,
                    lineTension: 0
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            max: 10,
                            min: 0,
                            stepSize: 0.1
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            max: 6,
                            min: 0,
                            stepSize: 1
                        }
                    }]
                }
            }
        });
    </script>
</body>


var ctx=document.getElementById（'myChart'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[0.0,1.0,2.0,3.0,4.0,5.0]，
数据集：[{
标签：“一些标签”，
数据：[{x:0，y:5}，{x:2.1，y:4.3}，{x:3.9，y:3}]，
边框颜色：“红色”，
填充：假，
线张力：0
}]
},
选项：{
比例：{
xAxes：[{
滴答声：{
最高：10，
分:0,，
步长：0.1
}
}],
雅克斯：[{
滴答声：{
最高：6，
分:0,，
步长：1
}
}]
}
}
});
对于y轴，使用ticks选项的
步长变量执行此操作。对x轴执行同样的操作稍微复杂一些，但并非不可能

第一个问题是，您的x轴标签是以整数间隔排列的，因此图表除了以最接近的整数排列外，没有其他地方可以放置十进制值。可以通过在标签中指定所需间隔（即：0.1、0.2、…、3.0）中的所有值来解决此问题。

然后，利用
autoSkip
和
maxTicksLimit
，您可以隐藏不需要的标签，从而创建图像中显示的图表，但点位于正确的位置


我用你的代码制作了一个工作版本。希望这有帮助
 这看起来很有希望！我会尝试一下，然后再给你一些反馈！这很有效。此解决方案只有一个问题：当我将鼠标悬停在图表中的数据点上方时，x坐标显示不正确（例如，实际x值为3，显示为0.3）