js统计图源码

以下是一个使用JavaScript绘制简单柱状统计图的示例代码，使用了HTML5的<canvas>元素：

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单柱状统计图</title>
</head>

<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script src="chart.js"></script>
</body>

</html>

JavaScript部分（chart.js）：

// 获取canvas元素和绘图上下文
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');

// 统计数据
const data = [12, 19, 3, 5, 2, 3];

// 设置柱状图属性
const barWidth = canvas.width / data.length;
let x = 0;

// 绘制柱状图
data.forEach((value) => {
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, canvas.height - value * 10, barWidth, value * 10);
    x += barWidth + 10;
});

基础概念：

HTML5 Canvas：这是一个可以通过JavaScript脚本来绘制图形（如直线、曲线、矩形、圆形等）、动画以及处理图像的HTML元素。
绘图上下文（Context）：通过canvas.getContext()方法获取，在这个上下文中可以进行各种绘图操作。

优势：

灵活性高，可以根据需求定制各种复杂的图形。
不需要依赖外部插件，在现代浏览器中有很好的支持。

应用场景：

数据可视化，在网页上直观地展示数据趋势、分布等情况。
简单的游戏画面绘制（对于一些小型简单游戏）。

可能遇到的问题及解决方法：

图形显示异常：可能是坐标计算错误。仔细检查数据到像素坐标的转换逻辑，比如在上述代码中canvas.height - value * 10这种计算方式要根据数据和画布大小合理调整。
不同浏览器兼容性问题：虽然现代浏览器对Canvas支持较好，但一些旧版本可能存在问题。可以检测浏览器版本或者使用一些兼容性库来解决。

如果想要更复杂、功能更强大的统计图，可以使用一些JavaScript图表库，如Echarts、Highcharts等。以Echarts为例：

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Echarts柱状统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 400px;height:200px;"></div>
  <script src="echartsChart.js"></script>
</body>

</html>

JavaScript部分（echartsChart.js）：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [12, 19, 3, 5, 2, 3],
        type: 'bar'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

优势：