HMTL-код:
<div class = "col-xl-12 col-lg-7">
<div class = "card shadow mb-4">
<div class = "card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class = "m-0 font-weight-bold text-primary">Evolution of Names vs Dates</h6>
<div class = "dropdown no-arrow">
</div>
</div>
<div class = "card-body">
<div class = "container-fluid">
<canvas id = "food_items_line_chart"></canvas>
</div>
</div>
</div>
</div>
Javascript-код:
<script>
$(document).ready(function () {
var ctx = $("#my_line_chart");
var names2 = ['name1', 'name2'];
var colors2 = ['orange', 'blue'];
var data2 = [[10,20],[20,30]];
var dates2 = ['2020-01', '2020-02'];
var data =
{
labels: dates2,
datasets :
[
for (let i = 0; i <= data.length; i++)
{
{
label: names2[i],
data: data2[i],
borderColor:
[
colors2[i],
],
borderWidth : 1
},
}
]
};
var options = {
title : {
display : false,
position : "top",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true
},
scales : {
yAxes : [{
ticks : {
min : 0
}
}]
}
};
var chart = new Chart( ctx, {
type : "line",
data : data,
options : options
});
});
</script>
Я только начинаю изучать javascript, поэтому я, вероятно, делаю много вещей неправильно, но идея состоит в том, чтобы загрузить эту линейную диаграмму ChartJs на HTML-страницу. Я получаю много ошибок при проверке HTML-страницы, первая ошибка: «Uncaught SyntaxError: Unexpected token 'for'».
Вы не можете вставлять оператор for в определение массива на datasets
@mardubbles Как вы предлагаете мне редактировать код?
@PCDSandwichMan Я добавил HTML-код
Вы можете использовать Array.map()
для прямого преобразования ваших данных в определение, требуемое Chart.js.
Пожалуйста, взгляните на свой исправленный и работающий код и посмотрите, как он работает.
var names2 = ['name1', 'name2'];
var colors2 = ['orange', 'blue'];
var data2 = [[10, 20], [20, 30]];
var dates2 = ['2020-01', '2020-02'];
new Chart('food_items_line_chart', {
type: 'line',
data: {
labels: dates2,
datasets: dates2.map((ds, i) => ({
label: names2[i],
data: data2[i],
borderColor: colors2[i],
borderWidth: 1
}))
},
options: {
scales: {
y: {
min: 0
}
}
}
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id = "food_items_line_chart" height = "80"></canvas>
Можете ли вы поделиться всем html-файлом, чтобы я мог поиграть с ним?