#chart.js
Вопрос:
Я пытаюсь показать линейный график за год, используя chartjs. Мои данные представляют собой два набора данных, один для 2020 года и один для 2021 года, а ось y-это процент, а ось x-неделя года, т. е. 1-52. По-видимому, я могу это сделать, но я не могу контролировать свои линии сетки, галочки и маркировку по оси y.
Сложная часть, которая, как мне кажется, сбивает с толку график (или меня), заключается в том, что метки недель не совпадают, поскольку они отличаются на день или два), например, 1-я неделя в 2020 году-2020-01-05, а 1-я неделя в 2021 году-2021-01-03. Я сделал это, используя значения меток наборов данных. Я попытался использовать значения xAxisID, но, добавив их и установив конфигурацию в разделе «Масштабы», я перестал отображать свою диаграмму.
Я уже создавал диаграммы раньше, также с несколькими наборами данных, и, как и ожидалось, имел полный контроль над диаграммами, но никогда не использовал значения меток наборов данных.
Работающий:
- Номера недель 1-52 помечены по оси x.
- Проценты помечены вдоль оси y и содержат диапазон значений.
- Всплывающая подсказка показывает неделю в названии, а также правильную метку и значение недели за оба года.
Не работает:
- Я не могу контролировать процентную метку в диапазоне от 0 до 100, и я не могу заставить ее отображать %.
- Я хочу, чтобы линии сетки по оси y отображались только для каждых 20%.
- Я не могу отключить вертикальные линии сетки по оси x.
- Я не могу установить максимальную скорость, чтобы номера недель по оси x не были наклонены.
По сути, я не могу управлять настройками отображения диаграммы. Пожалуйста, помогите мне разгадать эту тайну! Спасибо! Вот мой «рабочий» код:
lt;scriptgt; const weeknums = Array.from({length: 52}, (_, i) =gt; i 1); var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: weeknums, datasets: [ { labels: [ '2020-01-05', '2020-01-12', '2020-01-19', '2020-01-26', '2020-02-02', '2020-02-09', '2020-02-16', '2020-02-23', '2020-03-01', '2020-03-08', '2020-03-15', '2020-03-22', '2020-03-29', '2020-04-05', '2020-04-12', '2020-04-19', '2020-04-26', '2020-05-03', '2020-05-10', '2020-05-17', '2020-05-24', '2020-05-31', '2020-06-07', '2020-06-14', '2020-06-21', '2020-06-28', '2020-07-05', '2020-07-12', '2020-07-19', '2020-07-26', '2020-08-02', '2020-08-09', '2020-08-16', '2020-08-23', '2020-08-30', '2020-09-06', '2020-09-13', '2020-09-20', '2020-09-27', '2020-10-04', '2020-10-11', '2020-10-18', '2020-10-25', '2020-11-01', '2020-11-08', '2020-11-15', '2020-11-22', '2020-11-29', '2020-12-06', '2020-12-13', '2020-12-20', '2020-12-27', ], label: '2020', data: [ '38.7', '34.3', '39.6', '46.3', '55.9', '62.9', '63.3', '63.5', '64.9', '65.9', '66.9', '71.0', '70.5', '64.5', '59.0', '54.0', '50.1', '51.0', '50.6', '49.3', '49.6', '51.2', '52.1', '51.5', '52.6', '53.0', '53.5', '53.9', '53.5', '54.4', '54.8', '55.5', '55.4', '56.2', '59.2', '60.6', '63.8', '65.0', '66.5', '68.7', '69.4', '70.0', '68.8', '68.5', '66.5', '65.1', '64.8', '61.8', '59.2', '58.2', '58.1', '61.3', ], borderColor: [ 'rgba(1, 60, 36, 1)' ], backgroundColor: [ 'rgba(1, 60, 36, 0.2)' ], borderWidth: 2, pointRadius: 0, fill: false, spanGaps: true, lineTension: 0 }, { labels: [ '2021-01-03', '2021-01-10', '2021-01-17', '2021-01-24', '2021-01-31', '2021-02-07', '2021-02-14', '2021-02-21', '2021-02-28', '2021-03-07', '2021-03-14', '2021-03-21', '2021-03-28', '2021-04-04', '2021-04-11', '2021-04-18', '2021-04-25', '2021-05-02', '2021-05-09', '2021-05-16', '2021-05-23', '2021-05-30', '2021-06-06', '2021-06-13', '2021-06-20', '2021-06-27', '2021-07-04', '2021-07-11', '2021-07-18', '2021-07-25', '2021-08-01', '2021-08-08', '2021-08-15', '2021-08-22', '2021-08-29', '2021-09-05', '2021-09-12', '2021-09-19', '2021-09-26', '2021-10-03', '2021-10-10', '2021-10-17', '2021-10-24', ], label: '2021', data: [ '63.0', '61.1', '61.9', '62.0', '68.0', '75.1', '77.5', '80.1', '78.9', '78.7', '79.1', '79.3', '79.0', '79.1', '79.6', '79.3', '80.7', '79.8', '80.1', '79.3', '79.3', '78.7', '75.7', '74.6', '73.3', '74.6', '75.2', '71.1', '69.4', '66.1', '65.2', '67.4', '66.8', '66.6', '64.9', '64.0', '62.3', '62.4', '63.1', '63.6', '64.8', '65.5', '64.9', ], borderColor: [ 'rgba(1, 120, 72, 1)' ], backgroundColor: [ 'rgba(240, 247, 241, 1)' ], borderWidth: 2, pointRadius: 0, fill: false, spanGaps: true, lineTension: 0 } ] }, options: { responsive: true, tooltips: { mode: "index", intersect: false, backgroundColor: "rgba(1,1,1,0.6)", cornerRadius: 3, bodyFontSize: 14, displayColors: false, callbacks: { label: function(tooltipItem, data) { var dataset = data.datasets[tooltipItem.datasetIndex]; var index = tooltipItem.index; return dataset.labels[index] ': ' dataset.data[index] "%"; } } } }, hover: { mode: "nearest", intersect: true }, scales: { yAxes: [{ ticks: { beginAtZero: false, suggestedMin: 0, suggestedMax: 100, callback: function(value) { return value "%" } }, gridLines: { drawBorder: false, drawTicks: false, zeroLineWidth: 1 } }], xAxes: [{ ticks: { source: "labels", beginAtZero: true, display: false, autoSkip: true, maxTicksLimit: 2, maxRotation: 0 }, gridLines: { display: false } }] }, legend: { display: false } }); lt;/scriptgt;