js实现图表展示实现

使用 Chart.js 实现图表展示

Chart.js 是一个流行的开源 JavaScript 库，用于在网页上绘制各种类型的图表。它支持多种图表类型，包括折线图、柱状图、饼图、雷达图等。

安装 Chart.js

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

基本折线图实现

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales 2023',
            data: [65, 59, 80, 81, 56],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

使用 ECharts 实现高级图表

ECharts 是百度开发的强大图表库，支持更多复杂图表类型和交互功能。

安装 ECharts

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

柱状图实现示例

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: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};
myChart.setOption(option);

使用 D3.js 实现数据可视化

D3.js 是一个更底层的可视化库，适合需要高度定制化的场景。

安装 D3.js

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

简单饼图实现

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(d3.schemeCategory10);

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

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

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

const arcs = svg.selectAll('arc')
    .data(pie(data))
    .enter()
    .append('g');

arcs.append('path')
    .attr('d', arc)
    .attr('fill', (d, i) => color(i));

使用 Google Charts 实现快速图表

Google Charts 提供简单易用的 API 和丰富的图表类型。

加载 Google Charts 库

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

饼图示例

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    const data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 8],
        ['Eat', 2],
        ['TV', 4],
        ['Sleep', 10]
    ]);

    const options = {
        title: 'My Daily Activities'
    };

    const chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

响应式图表实现

为了使图表在不同屏幕尺寸下都能正常显示，需要添加响应式处理：

function resizeChart() {
    myChart.resize();
}

window.addEventListener('resize', resizeChart);

以上方法提供了不同复杂度和功能的图表实现方案，可以根据项目需求选择合适的库。Chart.js 适合简单快速的图表需求，ECharts 适合需要丰富交互的场景，D3.js 适合高度定制化的可视化，而 Google Charts 则提供了最简单易用的 API。