当前位置：首页 > JavaScript

js实现图表

2026-02-28 18:45:43JavaScript

使用 Chart.js 实现图表

Chart.js 是一个流行的开源 JavaScript 库，用于创建响应式、美观的图表。支持多种图表类型，包括折线图、柱状图、饼图等。

安装 Chart.js：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建基础柱状图：

<canvas id="myChart" width="400" height="400"></canvas>
<script>
  const ctx = document.getElementById('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],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

使用 D3.js 实现高级图表

D3.js 是一个功能强大的数据可视化库，提供更底层的控制能力。

安装 D3.js：

<script src="https://d3js.org/d3.v7.min.js"></script>

创建简单饼图：

js实现图表

const data = [10, 20, 30, 40];
const width = 450;
const height = 450;
const radius = Math.min(width, height) / 2;

const color = d3.scaleOrdinal()
  .domain(data)
  .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b']);

const arc = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

const pie = d3.pie()
  .value(d => d);

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${width/2},${height/2})`);

const g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .style("fill", d => color(d.data));

g.append("text")
  .attr("transform", d => `translate(${arc.centroid(d)})`)
  .attr("dy", ".35em")
  .text(d => d.data);

使用 ECharts 实现交互式图表

ECharts 是百度开发的强大图表库，特别适合复杂的数据可视化需求。

安装 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

创建折线图：

js实现图表

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }]
};
myChart.setOption(option);

使用 Highcharts 实现商业图表

Highcharts 是一个专业的商业图表库，提供丰富的图表类型和配置选项。

安装 Highcharts：

<script src="https://code.highcharts.com/highcharts.js"></script>

创建面积图：

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'Fruit consumption'
  },
  series: [{
    name: 'Apples',
    data: [1, 2, 3, 5, 8, 13]
  }, {
    name: 'Oranges',
    data: [2, 3, 5, 7, 11, 13]
  }]
});

响应式设计技巧

确保图表在不同设备上正常显示：

// Chart.js 响应式配置
options: {
  responsive: true,
  maintainAspectRatio: false
}

// ECharts 响应式处理
window.addEventListener('resize', function() {
  myChart.resize();
});

这些方法提供了从简单到复杂的图表实现方案，可根据项目需求选择合适的库。Chart.js 适合快速实现基本图表，D3.js 适合需要高度自定义的场景，ECharts 和 Highcharts 则适合复杂的商业数据可视化需求。