scatter, в настройках наборов данных указываете showLine: true. Например:<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<canvas id="chart"></canvas>const createDataset = (color, label, baseY) => ({
borderColor: color,
label,
showLine: true,
data: Array.from({ length: 10 }, (_, i) => ({
x: 10 * (i + (Math.random() - 0.5)) | 0,
y: baseY + Math.random() * baseY | 0,
})),
});
new Chart(document.querySelector('#chart'), {
type: 'scatter',
data: {
datasets: [
createDataset('red', 'hello, world!!', 50),
createDataset('green', 'fuck the world', 100),
createDataset('blue', 'fuck everything', 200),
],
},
});В документации не нашёл явных примеров.
options: {
plugins: {
legend: {
onClick(e, legendItem, { chart }) {
this.legendItems.forEach((n, i) => {
chart.getDatasetMeta(i).hidden = n !== legendItem && (legendItem.hidden || !n.hidden);
});
chart.update();
},
},
},
},есть свойство для изменения ее цвета, но если убрать сетку с заднего фона, то это свойство не работает
options: {
scales: {
x: {
grid: {
display: false,
borderColor: 'red',
},
},
y: {
grid: {
display: false,
drawBorder: false,
},
},
},
},options: {
scales: {
y: {
ticks: {
callback: (value, index, values) =>
index > 0 && index < values.length - 1
? ''
: Math[index ? 'max' : 'min'](...values.map(n => n.value)),
...const baseURL = 'https://iss.moex.com//iss/history/engines/stock/markets/index/securities/RGBITR.json';
const params = new URLSearchParams([
[ 'sort_order', 'desc' ],
[ 'iss.meta', 'off' ],
[ 'iss.only', 'history' ],
[ 'history.columns', 'TRADEDATE,CLOSE' ],
]);
fetch(`${baseURL}?${params}`)
.then(r => r.json())
.then(r => {
new Chart(document.querySelector('#chart'), {
type: 'line',
data: {
labels: r.history.data.map(n => n[0]),
datasets: [ {
label: 'hello, world!!',
data: r.history.data.map(n => n[1]),
} ],
},
});
});fetch(`${baseURL}?${params}`)
.then(r => r.json())
.then(({ history: { data } }) => {
chart.data.labels = data.map(n => n[0]);
chart.data.datasets[0].data = data.map(n => n[1]);
chart.update();
});
const chart = new Chart(document.querySelector('#chart'), {
type: 'line',
data: {
labels: [],
datasets: [ {
label: 'hello, world!!',
data: [],
} ],
},
});xAxes: [{ и yAxes: [{ на x: { и y: {.format: 'DD/MM/YYYY'. Нужное вам свойство называется иначе, замените на parser: 'DD/MM/YYYY'.scaleLabel: { (как и его внутреннее содержимое) - смотрите сами.
options: {
scales: {
yAxes: [
{ id: 'y1', position: 'left' },
{ id: 'y2', position: 'right' },
],
},
},приложение делается на vue
пишу я на Vue, и к сожелению пока неочен хорошо знаком с Vue, поетому пока затрудняюсь подключить сей плагин