当前位置：首页 > JavaScript

js实现动态图表

2026-01-31 01:39:18JavaScript

使用 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 chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
        datasets: [{
            label: 'Sales 2023',
            data: [65, 59, 80, 81],
            borderColor: 'rgb(75, 192, 192)'
        }]
    }
});

动态更新图表数据

通过修改 chart.data 并调用 update() 方法实现动态更新：

function addData(label, newData) {
    chart.data.labels.push(label);
    chart.data.datasets[0].data.push(newData);
    chart.update();
}

// 调用示例
addData('May', 45);

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

let data = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.random() * 100);
}

const option = {
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data }]
};
myChart.setOption(option);

// 动态添加数据
setInterval(() => {
    data.shift();
    data.push(Math.random() * 100);
    myChart.setOption({ series: [{ data }] });
}, 1000);

使用 D3.js 实现自定义动态可视化

D3.js 提供更底层的控制，适合高度定制需求。

基本动态柱状图实现：

const data = [4, 8, 15, 16, 23, 42];
const svg = d3.select("body").append("svg");

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("height", d => d * 10)
    .attr("width", 50)
    .attr("x", (d,i) => i * 60)
    .attr("y", d => 300 - d * 10);

// 动态更新
function update(newData) {
    svg.selectAll("rect")
        .data(newData)
        .transition()
        .duration(500)
        .attr("height", d => d * 10)
        .attr("y", d => 300 - d * 10);
}

性能优化技巧

大数据量时使用数据采样或降采样技术。Chart.js 和 ECharts 都支持大数据模式：

// Chart.js 大数据配置
options: {
    parsing: false,
    normalized: true,
    animation: false
}

// ECharts 大数据配置
option = {
    dataset: {
        dimensions: ['x', 'y'],
        source: largeData
    },
    series: {
        type: 'line',
        progressive: 1000,
        smooth: true
    }
}

响应式设计实现

使图表适应不同屏幕尺寸：

js实现动态图表

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

// 监听窗口变化
window.addEventListener('resize', function() {
    chart.resize();
    myChart.resize(); // ECharts
});