Chart.js не отображает линию, просто точкиJquery

Программирование на jquery
Ответить
Anonymous
 Chart.js не отображает линию, просто точки

Сообщение Anonymous »

Я обновил chart.js от Old 2.6 до последнего 4.5 и сумел сломать кучу вещей. Я исправил все, за исключением двух выпусков: < /p>

Line Line, на которой изображены только точки и нет строк. Я знаю, что мой набор данных и
этикетки (переданные вместе как «данные» для функции рендеринга) в порядке, потому что, если я переключаюсь на стержню, он отображает нормально. < /Li>
НЕТ x и y -метки не отображаются. < /Li>
< /ul>
Я нахожусь в моем остроумии, и мы надеемся, что это будет применение, и я надеюсь, что это будет. На главной странице я включил ссылки на chart.js, v4.5.0; chartjs-plugin-datalabels.js v2.2.0; и chartjs-plugin-annotation.js v2.2.1. < /p>
html: < /p>
Я использовал файлы диаграммы JS отсюда: < /p>

Код: Выделить всё

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.min.js
https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js
https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.1/chartjs-plugin-annotation.min.js










< /code>
Функция рендеринга диаграммы: < /p>
Данные, передаваемые для функции рендеринга, состоит из меток и наборов данных. Есть 5 наборов данных, но для краткости я включил только два. Этого должно быть достаточно, чтобы воспроизвести проблему.  < /P>

var chartTxnCount;

var data = {
labels: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
datasets: [
backgroundColor: "#8e5ea2"
borderColor: "#4ad95a"
borderStyle: "solid"
borderWidth: 0
data:  [20,4,16,14,101,0,40,4,3,20,3,7,1,0,39,30,0,1,4,11,1075,156,6,null]
fill: false
label: Items Processed
showLines: true
spanGaps: true
], [
backgroundColor: "#3cba9f"
borderColor: "#efc818"
borderStyle: "solid"
borderWidth: 0
data:  [11,11,7,11,0,9,9,202,233,25,15,10,1,3,9,6,10,10,375,275,315,332,196,135]
fill: false
label: Items Released
showLines: true
spanGaps: true
],
}

function drawRespChart(data) {
const ctx = document.getElementById('rtChart').getContext('2d');

if (chartTxnCount)
chartTxnCount.destroy();

chartConfig =
{
type: 'line',    // 'bar' works fine, although still no x/y labels
data: data,
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
title: {
display: true,
text: 'Process Volume',
padding: {
top: 10,
bottom: 30
}
},
legend: {
display: true,
labels: {
color: 'rgb(0,0,0)'
}
},
scales: {
x: {
title: {
display: true,
text: 'Hour'
},
grid: {
display: false // Hide x-axis grid lines
},
ticks: {
color: '#555'
}
},
y: {
title: {
display: true,
text: 'Count'
},
beginAtZero: true,
ticks: {
stepSize: 20
}
},
},
datalabels: {
color: '#FF0000',
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
padding: 4,
font: {
weight: 'bold'
},
anchor: 'end',
align: 'start',
formatter: Math.round
}
}
}
};
chartTxnCount = new Chart(ctx, chartConfig);
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... -just-dots
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»