[英]How do you plot scatter graph with chart.js
I am trying to figure out how to plot a scatter graph with chart.js the data I am trying to plot is randomly generated where dates
is a list of datetime.now()
objects and prices
is a list of float numbers我想弄清楚如何 plot 散点图 chart.js 我正在尝试 plot 的数据是随机生成的,其中
dates
是datetime.now()
对象的列表, prices
是浮点数的列表
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_}]
});
converting the dates to float numbers does the job but it shows the dates as number and it is not that good looking将日期转换为浮点数可以完成这项工作,但它将日期显示为数字并且看起来不太好看
You can define your x-axis as follows您可以按如下方式定义 x 轴
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
Further information can be found at the Chart.js documentation here and in the Chart.js samples here .
可以在此处的 Chart.js 文档和此处的 Chart.js 示例中找到更多信息。
Note that I use chartjs-adapter-moment together with moment to make this work.
请注意,我使用chartjs-adapter-moment和moment来完成这项工作。 The formats for parsing and displaying time values as desired can be found here .
可以在此处找到用于解析和显示所需时间值的格式。
Please take a look at your amended code and see how it works.请查看您修改后的代码,看看它是如何工作的。
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>
The scatter chart uses a line chart internally but changes it so the showLine
property becomes false and both axis are set to linear.散点图在内部使用折线图,但对其进行了更改,因此
showLine
属性变为 false 并且两个轴都设置为线性。
So you can just set the showLine
property to false in your dataset and use a line chart.因此,您可以在数据集中将
showLine
属性设置为 false 并使用折线图。
const data = { labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], datasets: [{ label: 'Dataset 1', data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:1}, {x:5, y:8}, {x:6, y:8}, {x:7, y:2}, {x:8, y:2}, {x:9, y:3}, {x:10, y:5}, {x:11, y:7}, {x:12, y:1}] }] } const config = { type: 'scatter', data, options: { responsive: true, maintainAspectRatio: false, }, } const $canvas = document.getElementById('chart') const chart = new Chart($canvas, config)
<div class="wrapper" style="width: 98vw; height:180px"> <canvas id="chart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.