将 Chart.js 与 Gatsby 降价结合使用

Question

我正在尝试在 gatsby 网站上的降价生成博客文章中显示 chart.js 图表。

按照此处的 chart.js 安装指南进行操作。 (https://www.chartjs.org/docs/latest/getting-started/installation.html) 我选择通过 CDN 将 chart.js 导入项目。我正在使用 moment.js 附带的捆绑链接。

我正在使用 Helmet 将 chart.js 库导入 gatsby 站点。

<Helmet>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js">
</Helmet>

目前，我正在尝试将此处找到的示例图表 https://www.chartjs.org/docs/latest/getting-started/usage.html 显示到我的标记帖子中；

---
title: Title 1234
description: Subtitle 4567
category: graphs
date: "2020-06-01T00:00:00.000Z"
---

<canvas id="myChart" width="400" height="400"></canvas>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

### Title 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque maximus eros finibus rhoncus egestas. 
Aliquam ut erat ipsum. Mauris ultricies faucibus hendrerit.

结果是我的博客文章中的白色画布没有可见的图表。当我检查生成的代码时，我还发现画布已经包裹在 <p></p> 标记中。 任何帮助将不胜感激！

Answer 1

您需要使用 MDX 来执行此操作。 Gatsby has good documentation on how to achieve this.

实施后，您将能够在降价内容中使用常规 React 组件，类似于：

您的内容文件

// content.mdx
import { Chart } from '../components/chart'

The chart is rendered inside our MDX document.

<Chart />

使用和呈现您的内容

// index.js
import React from "react"
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import mdxContent from "./your-content.mdx"

export default () => {
    return (
        <MDXProvider>
            <MDXRenderer>{mdxContent}</MDXRenderer>
        </MDXProvider>
    )
}

您的图表组件（常规 React）

import React from "react"
import chartjs from "chart-js"

export default () => {
  const Chart = new chartjs(...)

  return <Chart />
}