TOAST UI Chart 使用教程

最新推荐文章于 2024-10-10 07:59:06 发布

邹岩讳Sally

最新推荐文章于 2024-10-10 07:59:06 发布

阅读量342

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00776/article/details/141917112

版权

TOAST UI Chart 使用教程

tui.chart🍞📊 Beautiful chart for data visualization.项目地址:https://gitcode.com/gh_mirrors/tu/tui.chart

1、项目介绍

TOAST UI Chart 是一个功能强大的数据可视化库，提供了多种类型的图表，如柱状图、折线图、饼图等，适用于各种数据展示需求。该项目是开源的，托管在 GitHub 上，由 NHN 维护。

2、项目快速启动

安装

首先，你需要通过 npm 安装 TOAST UI Chart：

npm install @toast-ui/chart

基本使用

以下是一个简单的示例，展示如何创建一个柱状图：

<!DOCTYPE html>
<html>
<head>
  <title>TOAST UI Chart Example</title>
  <link rel="stylesheet" href="path/to/tui-chart.css">
</head>
<body>
  <div id="chart"></div>
  <script src="path/to/tui-chart.js"></script>
  <script>
    const data = {
      categories: ['January', 'February', 'March', 'April', 'May', 'June'],
      series: [
        {
          name: 'Sales',
          data: [30, 40, 35, 50, 49, 60]
        }
      ]
    };

    const options = {
      chart: {
        width: 800,
        height: 400
      }
    };

    const chart = new tui.Chart(document.getElementById('chart'), data, options);
  </script>
</body>
</html>