使用javascript在Chrome build by chart jS中打印图表

要在Chrome浏览器中使用JavaScript通过Chart.js库打印图表，你需要遵循以下步骤：

基础概念

Chart.js: 是一个简单且灵活的JavaScript图表库，用于绘制各种图表，如折线图、柱状图、饼图等。
打印: 在Web开发中，打印通常指的是将网页的一部分或全部内容输出到打印机。

类型与应用场景

折线图: 适合展示数据随时间变化的趋势。
柱状图: 适合比较不同类别的数据。
饼图: 适合展示各部分占整体的比例。
应用场景: 数据分析报告、业务监控面板、财务统计等。

实现步骤

引入Chart.js库: 在HTML文件中通过<script>标签引入Chart.js库。
创建图表容器: 在HTML中定义一个<canvas>元素作为图表的容器。
初始化图表: 使用JavaScript创建一个新的Chart实例，并将其绑定到<canvas>元素上。
打印图表: 创建一个打印功能，通常是通过JavaScript触发浏览器的打印对话框。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  @media print {
    body * {
      visibility: hidden;
    }
    #chart-container, #chart-container * {
      visibility: visible;
    }
    #chart-container {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
</style>
</head>
<body>

<div id="chart-container">
  <canvas id="myChart"></canvas>
</div>

<button onclick="printChart()">Print Chart</button>

<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: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  function printChart() {
    window.print();
  }
</script>

</body>
</html>