plot散點圖怎么和chart.js

Question

我想弄清楚如何 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_}]
});

將日期轉換為浮點數可以完成這項工作，但它將日期顯示為數字並且看起來不太好看

Answer 1

您可以按如下方式定義 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/chartjs-adapter-moment@1.0.0"></script> <canvas id="chart-line" height="200"></canvas>

Answer 2

散點圖在內部使用折線圖，但對其進行了更改，因此showLine屬性變為 false 並且兩個軸都設置為線性。

因此，您可以在數據集中將showLine屬性設置為 false 並使用折線圖。

Answer 3

 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>