Я использую библиотеку chart.js v2 для рисования диаграммы. Я пытался установить нулевую линию, но это не работает. Мне нужно нарисовать две линии, как на скриншоте ниже. Можно ли рисовать с некоторыми вариантами цинфигурации?
var options = {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 20,
y: 1
},
{
x: 21,
y: 1.1
},
{
x: 23,
y: 1.4
},
],
}]
},
options: {
legend: false,
scales: {
yAxes: [{
ticks: {
min: 1,
max: 2,
display: false,
},
gridLines: {
color: 'transparent',
display: true,
zeroLineColor: 'red'
},
}],
xAxes: [{
ticks: {
min: 1,
max: 99,
},
gridLines: {
color: 'transparent',
display: true,
zeroLineColor: 'red'
},
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id = "chartJSContainer" width = "600" height = "400"></canvas>
</body>
Вот скрипт с кодом: https://jsfiddle.net/c4wotrx1/4/
@0stone0 на скрипке нет линий как на скриншоте, они мне нужны
zeroLine не будет работать, так как вы установили свой min равным 1, поэтому нет 0
попробуйте ниже, вам нужно сохранить линии, но скрыть их в области диаграммы.
Это можно сделать с помощью drawOnChartArea: false, см. этот документация
gridLines: {
drawBorder:true,
drawOnChartArea: false,
color: 'red',
display: true,
zeroLineColor: 'red'
},
надеюсь это поможет.
Вам нужно включить gridLines
как на xAxes
, так и на yAxes
, но отключить drawOnchartArea
:
xAxes: [{
ticks: {
min: 1,
max: 99,
},
gridLines: {
color: 'red',
display: true,
drawBorder: true,
drawOnChartArea: false
},
}],
yAxes: [{
gridLines: {
color: 'red',
display: true,
drawBorder: true,
drawOnChartArea: false
}
}]
Скриншот + jsfiddle показывают тот же результат. Пожалуйста, добавьте более подробную информацию о том, что не работает.