Código HTML:
<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>Código 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>Estoy empezando a aprender javascript, así que probablemente esté haciendo muchas cosas mal, pero la idea es cargar este gráfico de líneas ChartJs en una página HTML. Recibo muchos errores al inspeccionar la página HTML, el primer error es: "Error de sintaxis no detectado: token inesperado 'para'".
Puede usar Array.map() para transformar directamente sus datos en la definición requerida por Chart.js.
Eche un vistazo a su código modificado y ejecutable y vea cómo funciona.
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>