Estoy tratando de descubrir cómo trazar un gráfico de dispersión con chart.js, los datos que estoy tratando de trazar se generan aleatoriamente donde las dates
son una lista de objetos datetime.now()
y prices
son una lista de números flotantes
dates = [datetime.now().strftime("%Y-%m-%d") for i in range(10)]
var dates_ = {{dates|tojson}} var prices_ = {{prices|tojson}} function parse_data(dates , prices) { console.log(dates.length , prices.length) var tmp = []; for (let i = 0; i < dates.length; i++) { var x; var y; tmp[i] = {x: dates.at(i), y: prices.at(i)}; } return tmp; } var data_ = parse_data(dates_, prices_); var chart = new Chart(ctx, { type: 'scatter', data: { datasets: [{ lablel: "some_data", data: data_}] });
convertir las fechas en números flotantes funciona, pero muestra las fechas como números y no es tan atractivo
Puede definir su eje x de la siguiente manera
x: { type: 'time', time: { parser: 'YYYY-M-D', unit: 'day', displayFormats: { day: 'D MMM YYYY' }, tooltipFormat: 'D MMM YYYY' } }
Puede encontrar más información en la documentación de Chart.js aquí y en los ejemplos de Chart.js aquí .
Tenga en cuenta que uso chartjs-adapter-moment junto con moment para que esto funcione. Los formatos para analizar y mostrar valores de tiempo como se desee se pueden encontrar aquí .
Eche un vistazo a su código modificado y vea cómo funciona.
var test = [ { x: "2022-1-8", y: 950 }, { x: "2022-1-9", y: 1100 }, { x: "2022-1-10", y: 990 }, { x: "2022-1-12", y: 1250 }, { x: "2022-1-13", y: 1050 } ]; var chart = new Chart('chart-line', { type: 'scatter', data: { datasets: [{ data: test, label: 'buys', borderColor: "#3e95cd" }] }, options: { responsive: false, scales: { x: { type: 'time', time: { parser: 'YYYY-M-D', unit: 'day', displayFormats: { day: 'D MMM YYYY' }, tooltipFormat: 'D MMM YYYY' } } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script> <canvas id="chart-line" height="200"></canvas>
El gráfico de dispersión usa un gráfico de líneas internamente pero lo cambia para que la propiedad showLine
se vuelva falsa y ambos ejes se establezcan en lineales.
Entonces, puede establecer la propiedad showLine
en falso en su conjunto de datos y usar un gráfico de líneas.