前端页面编程序图表通常涉及以下步骤：
选择图表库
Highcharts：一个广泛使用的图表库，支持各种图表类型，如折线图、柱状图、饼图等。
ECharts：百度开源的图表库，同样支持多种图表类型，并且有丰富的配置选项。
Chart.js：一个轻量级的图表库，易于使用，适合快速开发。
D3.js：一个强大的数据可视化库，功能非常强大，但学习曲线较陡峭。
引入图表库
通过CDN引入图表库的JS文件，例如：
```html
```
或者通过npm安装并在项目中引入：
```bash
npm install highcharts
```
准备图表容器
在HTML中创建一个容器元素，并指定其大小，例如：
```html
```
初始化图表
使用图表库提供的API初始化图表，例如使用Highcharts：
```javascript
Highcharts.setOptions（{ global: { useUTC: false } }）；
$（function （） {
initChart（）；
}）；
function initChart（） {
var config = {
chart: { type: 'spline' },
title: { text: '动态模拟实时数据' },
xAxis: { type: 'datetime' },
yAxis: {
title: { text: '数值' }
},
series: [{
name: '示例数据',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}；
$（'container'）.highcharts（config）；
}
```
配置图表
根据需求配置图表的样式、数据、交互等，例如：
```javascript
var option = {
title: { text: 'Referer of a Website' },
tooltip: {
formatter: '{b}: {d}%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: '访问来源',
type: 'pie',
data: [
{ name: '搜索引擎', y: 71.5 },
{ name: '直接访问', y: 23.5 },
{ name: '邮件营销', y: 4.5 },
{ name: '联盟广告', y: 7.5 },
{ name: '视频广告', y: 4.5 }
]
}]
}；
myChart.setOption（option）；
```
动态更新图表
如果需要动态更新图表数据，可以通过修改图表的配置项来实现，例如：
```javascript
// 更新数据
var newData = [12, 19, 3, 5, 2, 3]；
myChart.series.setData（newData）；
```
通过以上步骤，你可以在前端页面中编写程序来生成各种图表。建议根据项目需求选择合适的图表库，并参考官方文档进行详细配置和开发。