我試圖弄清楚如何用chart.js繪制散點圖我試圖繪制的資料是隨機生成的，其中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_}]
});
將日期轉換為浮點數就可以了，但是它將日期顯示為數字并且看起來不太好看
uj5u.com熱心網友回復：
您可以按如下方式定義 x 軸
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
更多資訊可在chart.js之檔案被發現這里和chart.js之樣品這里。
請注意，我使用chartjs-adapter-moment和moment來完成這項作業。可以在此處找到用于決議和顯示所需時間值的格式。
請查看您修改后的代碼，看看它是如何作業的。
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/[email protected]"></script>
<canvas id="chart-line" height="200"></canvas>uj5u.com熱心網友回復：
散點圖在內部使用折線圖，但對其進行了更改，因此showLine屬性變為 false，并且兩個軸都設定為線性。
因此，您可以showLine在資料集中將該屬性設定為 false 并使用折線圖。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/405763.html
標籤：