JsChart组件使用详解

简介

JsChart是一个基于SVG/VML的图表组件，可用于生成各种图表，包括线性图，柱状图，饼图，雷达图等。可以很好地应用于数据分析、报表制作等场景。

安装

可以直接在项目中引入JsChart.js文件，也可以使用npm进行安装:

npm install jschart

基本用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JsChart Demo</title>
  <script src="https://unpkg.com/jschart@1.0.0/dist/jschart.min.js"></script>
</head>
<body>

  <div id="chartContainer"></div>

  <script>
    const chart = new JsChart(document.getElementById('chartContainer'), {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'My First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

</body>
</html>

在上述示例中，我们使用JsChart生成了一个折线图，数据包括x轴的标签和y轴的值，使用scales来设置y轴的起点值为0。

示例1：生成饼图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JsChart Pie Demo</title>
  <script src="https://unpkg.com/jschart@1.0.0/dist/jschart.min.js"></script>
</head>
<body>

  <div id="chartContainer"></div>

  <script>
    const chart = new JsChart(document.getElementById('chartContainer'), {
      type: 'pie',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: 'My First Dataset',
          data: [30, 50, 20],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
      },
    });
  </script>

</body>
</html>

在上述示例中，我们生成了一个饼图，数据包括每个区块的标签和值，使用backgroundColor来设置每个区块的颜色。

示例2：生成柱状图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JsChart Bar Demo</title>
  <script src="https://unpkg.com/jschart@1.0.0/dist/jschart.min.js"></script>
</head>
<body>

  <div id="chartContainer"></div>

  <script>
    const chart = new JsChart(document.getElementById('chartContainer'), {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'My First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: '#36A2EB',
          borderColor: '#36A2EB',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

</body>
</html>

在上述示例中，我们生成了一个柱状图，数据包括每个柱子的标签和高度，使用backgroundColor和borderColor来设置柱子的颜色，使用borderWidth来设置柱子边框的宽度。