# 网站流量分析图表

URL: https://caijiao.org/chartjs/10-projects/02-traffic-analytics
Source: docs/chartjs/10-projects/02-traffic-analytics.md
Description: 展示网站流量的分析图表示例，通过折线图和柱状图展现访问趋势和来源数据，帮助理解访客行为。

使用 [Chart.js](/chartjs/) 可以直观地展示网站流量数据，帮助分析访问量和来源。以下示例结合折线图和柱状图，分别反映每日访问量趋势和主要流量来源。

```js
const ctxLine = document.getElementById("trafficLine").getContext("2d");
const trafficLine = new Chart(ctxLine, {
  type: "line",
  data: {
    labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    datasets: [
      {
        label: "访问量",
        data: [1200, 1900, 1700, 2100, 2500, 2300, 2000],
        borderColor: "rgb(75, 192, 192)",
        fill: false,
        tension: 0.2,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: { legend: { display: true } },
  },
});

const ctxBar = document.getElementById("trafficBar").getContext("2d");
const trafficBar = new Chart(ctxBar, {
  type: "bar",
  data: {
    labels: ["直接访问", "搜索引擎", "社交媒体", "推荐网站"],
    datasets: [
      {
        label: "访问来源",
        data: [500, 800, 300, 200],
        backgroundColor: [
          "rgba(255, 99, 132, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(255, 206, 86, 0.7)",
          "rgba(75, 192, 192, 0.7)",
        ],
      },
    ],
  },
  options: {
    responsive: true,
    plugins: { legend: { display: true } },
  },
});
```

[在线代码演示](/chartjs/demos/34.html)