在Chart.js图形中设置最大、最小和步长值
我试图为我的在Chart.js图形中设置最大、最小和步长值,chart.js,Chart.js,我试图为我的Chart.jsgraph指定最大、最小和步长值 有人能解释一下为什么下面的代码会生成这个图吗 我特别写： max: 12, min: 0, stepSize: 1.0, 所以我不知道为什么我的设置会被忽略 任何帮助都将不胜感激 谢谢 代码 <canvas id="h-t"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.
Chart.jsmax: 12,
min: 0,
stepSize: 1.0,
<canvas id="h-t"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.csv('h.csv')
.then(makeChart);
function makeChart(hdata) {
var t = hdata.map(function(d) {return d.t});
var h = hdata.map(function(d) {return d.h});
var chart = new Chart('h-t', {
type: 'line',
data: {
labels: t,
datasets: [
{
data: h,
backgroundColor: '#2a54a9',
borderColor: '#2a54a9',
fill: false,
// pointRadius: 10,
// pointHoverRadius: 15,
showLine: false // no line shown
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
afterFit: function(scale) {
scale.height = 80 //<-- set value as you wish
},
scaleLabel: {
display: true,
labelString: 'Tiempo (min)',
fontSize: 18,
// fontFamily: 'Cabin Sketch',
fontColor: '#111111'
},
ticks: {
fontSize: 16,
// fontFamily: 'EB Garamond',
fontColor: '#111111',
max: 12,
min: 0,
stepSize: 1.0,
padding: 10
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
scaleLabel: {
display: true,
labelString: 'Altitud (km)',
fontSize: 18,
// fontFamily: 'Cabin Sketch',
fontColor: '#111111'
},
ticks: {
beginAtZero: true,
fontSize: 16,
// fontFamily: 'EB Garamond',
fontColor: '#111111',
padding: 10,
stepSize: 50,
suggestedMax: 250,
suggestedMin: 0
}
}]
},
legend: {
display: false
},
}
});
}
</script>
问题是，您已经用标签
构建了折线图的X轴，这些标签是分类的，而不是数字的
要将数字范围应用于X轴，需要执行两项操作：
- 设置xAxis
类型：“线性”
- 将
dataset.data
更改为{x，y}
坐标
换句话说，传递给Chart.js的数据必须如下所示：
[
{x:0，y:0}，
{x:0.26，y:0.4}，
{x:0.43，y:1.2}，
...
]
我已经修改了下面的示例，以在实际操作中显示这一点，包括X轴范围从0到12。下面是它的样子：
这是修改后的代码。请注意，我只是直接包含了您的数据，而不是使用D3：
const ctx=document.getElementById（'myChart'）.getContext（'2d'）；
常数系列=[
[0, 0],
[0.266666666666667, 0.4],
[0.433333333333333, 1.2],
[0.6, 2.5],
[0.766666666666667, 4.4],
[0.933333333333333, 6.8],
[1.1, 9.6],
[1.26666666666667, 12.8],
[1.43333333333333, 16.9],
[1.6, 22],
[1.76666666666667, 28.3],
[1.93333333333333, 35.7],
[2.1, 44.2],
[2.26666666666667, 53.9],
[2.43333333333333, 64.7],
[2.6, 76.4],
[2.76666666666667, 88.3],
[2.93333333333333, 100],
[3.1, 110],
[3.26666666666667, 121],
[3.43333333333333, 130],
[3.6, 139],
[3.76666666666667, 148],
[3.93333333333333, 156],
[4.1, 163],
[4.26666666666667, 169],
[4.43333333333333, 175],
[4.6, 180],
[4.76666666666667, 184],
[4.93333333333333, 188],
[5.1, 191],
[5.26666666666667, 194],
[5.43333333333333, 196],
[5.6, 198],
[5.76666666666667, 200],
[5.93333333333333, 200],
[6.1, 201],
[6.26666666666667, 201],
[6.43333333333333, 202],
[6.6, 201],
[6.76666666666667, 201],
[6.93333333333333, 201],
[7.1, 200],
[7.26666666666667, 200],
[7.43333333333333, 199],
[7.6, 199],
[7.76666666666667, 198],
[7.93333333333333, 198],
[8.1, 198],
[8.26666666666667, 198],
[8.43333333333333, 198],
[8.6, 197],
[8.76666666666667, 197],
[8.93333333333333, 198],
[9.1, 198],
[9.26666666666667, 198],
[9.43333333333333, 198],
[9.6, 198],
[9.76666666666667, 198],
[9.93333333333333, 199],
[10.1, 199],
[10.2666666666667, 199],
[10.4333333333333, 199],
[10.6, 199],
[10.7666666666667, 199],
[10.9333333333333, 200],
[11.1, 200],
[11.2666666666667, 200],
[11.4333333333333, 200],
[11.6, 200],
[11.7666666666667, 200],
[11.9333333333333, 201],
[12.1, 201],
];
新图表（ctx{
键入：“行”，
数据：{
数据集：[{
数据：series.map（数据=>({
x：基准面[0]，
y:基准[1]
})),
背景颜色：“#2a54a9”，
边框颜色：“#2a54a9”，
填充：假，
//点半径：10，
//点半径：15，
showLine:false//未显示任何行
}]
},
选项：{
比例：{
xAxes：[{
类型：“线性”，
网格线：{
drawOnChartArea:错误，
颜色：“111111”
},
后装配：功能（比例）{
scale.height=80/回答得很好-恭喜
对于那些感兴趣的人，这里的代码适用于最新的chart.js
versionv3.2.1
（chart.jsv3.xx与v2.xx不向后兼容）
而不是v2.9.3
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
现在v3.x
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
（获取chart.js的最新版本（现在是v3.2.1）
const ctx=document.getElementById（'myChart'）.getContext（'2d'）；
常数系列=[
[0, 0],
[0.266666666666667, 0.4],
[0.433333333333333, 1.2],
[0.6, 2.5],
[0.766666666666667, 4.4],
[0.933333333333333, 6.8],
[1.1, 9.6],
[1.26666666666667, 12.8],
[1.43333333333333, 16.9],
[1.6, 22],
[1.76666666666667, 28.3],
[1.93333333333333, 35.7],
[2.1, 44.2],
[2.26666666666667, 53.9],
[2.43333333333333, 64.7],
[2.6, 76.4],
[2.76666666666667, 88.3],
[2.93333333333333, 100],
[3.1, 110],
[3.26666666666667, 121],
[3.43333333333333, 130],
[3.6, 139],
[3.76666666666667, 148],
[3.93333333333333, 156],
[4.1, 163],
[4.26666666666667, 169],
[4.43333333333333, 175],
[4.6, 180],
[4.76666666666667, 184],
[4.93333333333333, 188],
[5.1, 191],
[5.26666666666667, 194],
[5.43333333333333, 196],
[5.6, 198],
[5.76666666666667, 200],
[5.93333333333333, 200],
[6.1, 201],
[6.26666666666667, 201],
[6.43333333333333, 202],
[6.6, 201],
[6.76666666666667, 201],
[6.93333333333333, 201],
[7.1, 200],
[7.26666666666667, 200],
[7.43333333333333, 199],
[7.6, 199],
[7.76666666666667, 198],
[7.93333333333333, 198],
[8.1, 198],
[8.26666666666667, 198],
[8.43333333333333, 198],
[8.6, 197],
[8.76666666666667, 197],
[8.93333333333333, 198],
[9.1, 198],
[9.26666666666667, 198],
[9.43333333333333, 198],
[9.6, 198],
[9.76666666666667, 198],
[9.93333333333333, 199],
[10.1, 199],
[10.2666666666667, 199],
[10.4333333333333, 199],
[10.6, 199],
[10.7666666666667, 199],
[10.9333333333333, 200],
[11.1, 200],
[11.2666666666667, 200],
[11.4333333333333, 200],
[11.6, 200],
[11.7666666666667, 200],
[11.9333333333333, 201],
[12.1, 201],
];
新图表（ctx{
键入：“行”，
数据：{
数据集：[{
数据：series.map（数据=>({
x：基准面[0]，
y:基准[1]
})),
背景颜色：“#2a54a9”，
边框颜色：“#2a54a9”，
填充：假，
展示路线：错误
}]
},
op
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>