当前位置：首页 > JavaScript

js实现图表展示实现

2026-04-06 02:03:55JavaScript

使用 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>

使用 ECharts 实现图表展示

ECharts 是百度开源的一个功能强大的可视化库，支持多种图表类型和交互功能。

安装 ECharts

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

创建折线图示例

<div id="main" style="width: 600px;height:400px;"></div>
<script>
  const myChart = echarts.init(document.getElementById('main'));
  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'
    }]
  };
  myChart.setOption(option);
</script>

使用 D3.js 实现高级可视化

D3.js 是一个强大的数据驱动文档库，适合创建高度定制化的可视化效果。

安装 D3.js

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

创建简单柱状图示例

<svg id="d3-chart" width="600" height="400"></svg>
<script>
  const data = [30, 86, 168, 281, 303, 365];
  const svg = d3.select("#d3-chart");
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 70)
    .attr("y", (d) => 400 - d)
    .attr("width", 65)
    .attr("height", (d) => d)
    .attr("fill", "steelblue");
</script>

使用 Highcharts 实现商业图表

Highcharts 是一个专业的商业图表库，支持丰富的图表类型和导出功能。

安装 Highcharts

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

创建饼图示例

js实现图表展示实现

<div id="highchart-container" style="width: 400px; height: 400px;"></div>
<script>
  Highcharts.chart('highchart-container', {
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Browser market shares'
    },
    series: [{
      name: 'Brands',
      data: [{
        name: 'Chrome',
        y: 61.41
      }, {
        name: 'Internet Explorer',
        y: 11.84
      }, {
        name: 'Firefox',
        y: 10.85
      }]
    }]
  });
</script>