ASPX中BarChart控件如何设置Y轴范围0-100、刻度间隔为10

你使用的AjaxControlToolkit BarChart控件没有公开Y轴范围、刻度间隔的服务端配置属性，可通过控件自带的客户端渲染事件修改轴配置实现需求，具体操作如下：

操作步骤 #

• 修改aspx页面的BarChart控件标签，添加客户端创建事件绑定
  在原有控件属性中新增ClientSideOnChartCreated属性，绑定自定义JS处理函数，修改后的控件代码如下：

<asp:BarChart
    ID="BarChart1"
    runat="server"
    ChartHeight="300"
    ChartWidth="1200"
    ChartType="Column"
    ChartTitleColor="#0095AA"
    CategoryAxisLineColor="#99A7B7"
    ValueAxisLineColor="#99A7B7"
    BaseLineColor="#666666"
    CssClass="nolegend noborder"
    ClientSideOnChartCreated="adjustBarChartAxis">
</asp:BarChart>

• 在aspx页面中添加JS处理函数，强制指定Y轴参数
  该函数会在图表渲染前执行，直接修改Y轴配置，关闭自动计算逻辑，固定范围0-100、刻度间隔10，代码如下：

function adjustBarChartAxis(chartInstance) {
    // 获取Y轴配置对象
    const yAxis = chartInstance._valueAxis;
    // 设置Y轴最小值、最大值
    yAxis.minimum = 0;
    yAxis.maximum = 100;
    // 设置刻度间隔为10
    yAxis.interval = 10;
    // 关闭轴参数自动计算，避免自定义配置被覆盖
    yAxis.autoCalculate = false;
}

• 后端aspx.vb的fillGraph数据绑定逻辑不需要修改，保持原有代码即可正常运行。

兼容说明 #

如果你使用的是15.1之前的旧版AjaxControlToolkit，_valueAxis内部属性名可能存在差异，可在浏览器开发者工具中给adjustBarChartAxis函数加断点，打印chartInstance对象查找对应的值轴配置属性即可。

当前默认渲染效果参考：

内容的提问来源于stack exchange，提问作者danielyepesl