利用Office Chart 制作柱图(一个柱子)

本文介绍如何在VS.NET2003环境下利用OfficeChart11.0创建并定制柱状图,包括配置环境、添加COM组件及使用VBScript进行图表属性设置等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

环境:VS.NET 2003 、Office 2003
语言:VBScript 、C#
步骤
        1.单击“工具箱-添加/移除项”,弹出“自定义工具箱”;
         2.点击“COM组件”,选择“Microsoft Office Chart 11.0”然后确定,此时工具栏上出现“Microsoft Office Chart 11.0”的图标;
          3..aspx的后台代码如下:
       

 

柱状图代码(单个柱子)

柱图:
  
注意:
1。<OBJECT>控件放在<form>外,负责提示“缺少对象”的错误!
2。修改柱子的颜色:Interior.Color
3。categories和values1从数据库中的读取方法:
   categories="<%=Categories%>"
   values1="<%=values1%>"
   其中的Categories和values1是后台定义的全局(string类型)变量,赋上相应值即可,注意要用制表符分割。C#中的制表符:(char)(9)
4。图类型:
 1-5 普通柱子
 6-11 折线
 12-17 正弦线
 18-20 饼图
 21-26 分散
 27-28 气泡
 29-31 填充
 32-33 油炸圈饼
 34-38   雷达线
 39-40
 41-45  北极图
 46-53  立体柱图
 54-57  立体折线图
 58-59  立体饼图
 60-63  立体填充图
chChartTypeCombo -1
chChartTypeColumnClustered 0
chChartTypeColumnStacked 1
chChartTypeColumnStacked100 2
chChartTypeBarClustered 3
chChartTypeBarStacked 4
chChartTypeBarStacked100 5
chChartTypeLine 6
chChartTypeLineMarkers 7
chChartTypeLineStacked 8
chChartTypeLineStackedMarkers 9
chChartTypeLineStacked100 10
chChartTypeLineStacked100Markers 11
chChartTypeSmoothLine 12
chChartTypeSmoothLineMarkers 13
chChartTypeSmoothLineStacked 14
chChartTypeSmoothLineStackedMarkers 15
chChartTypeSmoothLineStacked100 16
chChartTypeSmoothLineStacked100Markers 17
chChartTypePie 18
chChartTypePieExploded 19
chChartTypePieStacked 20
chChartTypeScatterMarkers 21
chChartTypeScatterSmoothLineMarkers 22
chChartTypeScatterSmoothLine 23
chChartTypeScatterLineMarkers 24
chChartTypeScatterLine 25
chChartTypeScatterLineFilled 26
chChartTypeBubble 27
chChartTypeBubbleLine 28
chChartTypeArea 29
chChartTypeAreaStacked 30
chChartTypeAreaStacked100 31
chChartTypeDoughnut 32
chChartTypeDoughnutExploded 33
chChartTypeRadarLine 34
chChartTypeRadarLineMarkers 35
chChartTypeRadarLineFilled 36
chChartTypeRadarSmoothLine 37
chChartTypeRadarSmoothLineMarkers 38
chChartTypeStockHLC 39
chChartTypeStockOHLC 40
chChartTypePolarMarkers 41
chChartTypePolarLine 42
chChartTypePolarLineMarkers 43
chChartTypePolarSmoothLine 44
chChartTypePolarSmoothLineMarkers 45

 

### 实现ECharts点击事件获取当前柱子所在的列 在ECharts中,可以通过`click`事件监听器捕获用户的交互行为,并通过回调函数中的参数获取被点击柱子的相关信息。以下是具体的实现方法: #### HTML 容器准备 首先需要准备好一个HTML容器用于承载表: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` #### JavaScript 配置与初始化 接下来初始化ECharts实例并设置配置项,同时绑定点击事件。 ```javascript // 初始化echarts实例 const chart = echarts.init(document.getElementById('chart')); // 准备配置项 const option = { title: { text: '销售数据表' }, tooltip: { trigger: 'axis' }, xAxis: { data: ['一月', '二月', '三月', '四月', '五月'] }, yAxis: {}, series: [{ name: '销售额', type: 'bar', data: [23, 45, 32, 67, 41], label: { show: true, position: 'top' } }] }; // 绑定点击事件 chart.on('click', function (params) { if (params.componentType === 'series') { // 判断是否点击的是系列(即柱子) console.log('点击的列为:', params.name); // 输出对应的X轴名称 console.log('点击的数据为:', params.value); // 输出对应Y轴数值 } }); // 使用配置项显示chart.setOption(option); ``` 以上代码实现了当用户点击某个柱子时,控制台会打印该柱子所属的列名以及其对应的数值[^1]。 #### 关键点解析 - **`chart.on('click', callback)`**: 此方法用于注册点击事件监听器。每当用户点击表上的某一部分时,都会触发此回调函数。 - **`params`对象**: 在回调函数中传入的对象包含了丰富的信息,其中常用的字段包括: - `componentType`: 表明所点击的部分属于哪个组件,如果是柱子,则通常为`series`。 - `name`: 当前柱子对应的X轴类别名称。 - `value`: 当前柱子的具体数值。 如果希望进一步处理这些数据,比如高亮选中的柱子或者跳转到其他页面,可以在回调函数内部扩展逻辑[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值