如何在lit-html中使用chart.js

6mzjoqzu 于 2024-01-07 发布在 Chart.js

关注(0)|答案(1)|浏览(329)

我使用render（）来创建和渲染lit-html

import { html, render } from 'lit-html';
const templateItems = [];
const getChartInfo = (locationToRender) => {
  templateItems.push(html`
    <span>Welcome to charts </span>
    `);
  render(templateItems, locationToRender);
};
export default getChartInfo;

字符串
如何使用chart.js（https://www.chartjs.org/docs/latest/getting-started/usage.html）？
看一下文档，firstupdated（）（https：//lit.dev/docs/components/lifecle/#firstupdated）可能是正确的钩子？如果是这样，我该如何使用它？
如果没有，我该怎么做？

chart.js

来源：https://stackoverflow.com/questions/77608097/how-to-use-chart-js-with-lit-html

1条答案

按热度按时间

u91tlkcl1#

当使用lit-element时，你需要渲染一个画布，就像任何其他元素一样。

render(): TemplateResult {
    return html`
      <div class="chart-wrapper">
        <canvas class="chart" ${ref(this.chartjsElementRef)}></canvas>
      </div>
    `;
  }

字符串
在生命周期期间，例如firstUpdated：

protected firstUpdated(_changedProperties: PropertyValues) {
    super.firstUpdated(_changedProperties);
    this.chart = new Chart(
      this.chartjsElementRef.value!,
      <chartconfig>
    );
}

型

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

如何在lit-html中使用chart.js

1条答案

相关问题

热门标签

最新问答