使用 javascript 的烛台图

Question

我正在尝试用java脚本设计一个candlestick图表，但是出现错误，有人可以帮助我吗？ 我的错误是：

未捕获的错误：“烛台”不是图表类型。

我正在观看视频并执行了所有步骤，但仍然出现错误 视频链接： https://www.youtube.com/watch?v=Pru1dPE0ubI

// setup
const starting = luxon.DateTime.fromRFC2822('01 Aug 2021 00:00 GMT')
const date2 = luxon.DateTime.fromRFC2822('02 Aug 2021 00:00 GMT')
const data = {
  datasets: [{
    data: [{
        x: starting.valueOf(),
        o: 1,
        h: 1.50,
        l: 0.75,
        c: 1.25,
      },
      {
        x: date2.valueOf(),
        o: 1,
        h: 1.50,
        l: 0.50,
        c: 0.90
      }
    ],
  }]
};

// config
const config = {
  type: 'candlestick',
  data,
  options: {}
};

// render init block
const myChart = new Chart(
  document.getElementById('chartBig2'),
  config
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.2/luxon.min.js" integrity="sha512-frUCURIeB0OKMPgmDEwT3rC4NH2a4gn06N3Iw6T1z0WfrQZd7gNfJFbHrNsZP38PVXOp6nUiFtBqVvmCj+ARhw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="/static/profile/js/financial.js" />

Answer 1

在js文件中尝试这个。 您应该将'chartjs-chart-financial'包注入到chartjs注册中。

import {CandlestickController, OhlcController, CandlestickElement, OhlcElement} from 'chartjs-chart-financial';
import Chart from 'chart.js/auto';
import 'chartjs-adapter-luxon';
import '../../front/css/chartjs/style.css';
import { DateTime } from 'luxon';

let barData = [];
            let labels = [];
            if(data.length == 1){
                barData.push({x: null, o: 100, c: 100, h: 100, l: 100});
            }
            barData.push(...data.map(item => 
                ({
                    x: DateTime.fromFormat(item.savedAt, 'yyyy-MM-dd').valueOf(),
                    o: item.openPrice,
                    c: item.closePrice,
                    h: item.highPrice,
                    l: item.lowPrice
                })
                )
            );
            let graph = new Chart(ctx, {
                type: 'candlestick',
                label: 'prix',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Prix',
                        data: barData,
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        y: {
                          beginAtZero: false
                        },
                        x: {
                          type: 'time',
                          time: {
                            unit: 'day',
                            tooltipFormat: 'dd/MM/yyyy',
                            displayFormats: {
                              week: 'dd/MM/yyyy',
                            }
                          },
                          ticks: {
                            source: 'data',
                            display: true,
                            maxRotation: 0,
                            minRotation: 0
                          },
                        },
                      },
                },
            });
        })