js实现图表展示实现

使用Chart.js实现图表展示

Chart.js是一个简单灵活的JavaScript图表库，适用于各种图表类型。以下是实现步骤：

安装Chart.js

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

创建基础柱状图

<canvas id="myChart"></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>

创建折线图示例

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var 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);

使用D3.js实现高度定制化图表

D3.js提供数据驱动的文档操作，适合需要完全控制的项目。

基础D3柱状图实现

const data = [4, 8, 15, 16, 23, 42];
const width = 420;
const barHeight = 20;

const x = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, width]);

const chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);

const bar = chart.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", (d, i) => `translate(0,${i * barHeight})`);

bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight - 1);

bar.append("text")
  .attr("x", d => x(d) - 3)
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .text(d => d);

响应式图表设计

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

function resizeChart() {
  myChart.resize();
}
window.addEventListener('resize', resizeChart);

图表数据动态更新

实现数据实时更新效果

function updateChart(newData) {
  myChart.data.datasets[0].data = newData;
  myChart.update();
}

图表主题定制

自定义图表颜色和样式

Chart.defaults.color = '#666';
Chart.defaults.font.family = 'Arial';
Chart.defaults.font.size = 12;

以上方法提供了从简单到复杂的图表实现方案，可根据项目需求选择合适的库和技术方案。