具有自动缩放功能的 ChartJS 股票价格折线图配置答案

【问题标题】：ChartJS stock price line chart config with autoscale具有自动缩放功能的 ChartJS 股票价格折线图配置
【发布时间】：2023-01-21 03:39:01
【问题描述】：

我正在尝试配置 ChartJS 以显示股票价格折线图，在 x 轴图例上显示月份，在 y 轴上显示价格。

但是想要种子周末股票收盘价，所以每月 4-5 个数据点，具体取决于月份。

还有一种方法可以自动计算当前日期并在滚动的基础上自动构建标签。

到目前为止得到这个：

const config = {
  type: 'line',
  data: data,
};

const labels = ['Aug', '', '', '',  'Sep', '', '', '',  'Oct', '', '', '',  'Nov', '', '', '',  'Dec', '', '', '',  'Jan', '', '', '',  'Feb', '', '', '',  'Mar', '', '', '',  'Apr', '', '', '',  'May', '', '', '',  'Jun', '', '', '',  'Jul']

const data = {
  labels: labels,
  datasets: [{
    label: 'Apple stock price',
    data: [141,139,128,133,136,130,136,125,126,128,129,127,122,125,122,122,131,133,131,126,130,131,128,131,131,128,128,126,128,127,133,130,137],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.5
  }]
};

但看起来我需要以某种方式配置 y 轴的对数刻度以及更好地将每周价格分布/映射到月份。

在这里找到了几个示例/答案，但其中很多是针对 5-10 年前的问题，因此也许在较新的版本中可以更轻松地完成此任务。

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

开始工作了

    var historicalprices = await yahooFinance.historical("AAPL", { period1: '2019-01-01', interval: '1mo' })
    var prices = historicalprices.map(historicalprice => ({ [historicalprice.date.toLocaleDateString('en-us', { year: "numeric", month: "short" })]: Math.round(historicalprice.adjClose) }))
const data = {
    labels: prices.map(x => Object.keys(x)).flat(),
    datasets: [{
        data: prices.map(x => Object.values(x)).flat(),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
    }]
}

我使用了一个简单的循环来遍历 best stocks to buy 的列表所以你可以在我的网站上看到最终结果。

【讨论】：