如何在ASP.NET C#后台调用JS函数实现Highcharts图表同步缩放

我在ASP.NET项目中使用C#后台生成Highcharts图表，所有图表数据均由后台填充，而非前端JavaScript创建。已编写纯JS函数syncExtremes用于同步所有图表的缩放级别，但在后台配置X轴SetExtremes事件调用该函数时始终失败，需要可行的配置示例。

现有同步缩放JS函数 #

function syncExtremes(e) {
            var thisChart = this.chart;

            const shouldShowResetZoom = !(e.min === undefined && e.max === undefined);

            if (e.trigger !== 'syncExtremes') { // 防止反馈循环
                Highcharts.each(Highcharts.charts, function (chart) {
                    if (chart !== thisChart) {
                        if (chart.xAxis[0].setExtremes) { // 更新时该值可能为null
                            chart.xAxis[0].setExtremes(
                                e.min,
                                e.max,
                                undefined,
                                false,
                                { trigger: 'syncExtremes' }
                            );
                        }
                    }

                    if (shouldShowResetZoom && !chart.resetZoomButton) {
                        chart.showResetZoom();
                    } else if (!shouldShowResetZoom && chart.resetZoomButton) {
                        chart.resetZoomButton = chart.resetZoomButton.destroy();
                    }
                });
            }
        }

C#后台图表生成代码 #

// 小型温度图表覆盖层
chartTemp = new Highcharts("chartTemp").InitChart(new Chart
{
    ZoomType = ZoomTypes.Xy,
    Height = 320,
    MarginTop = 100
})
.SetPlotOptions(options)
.SetXAxis(new XAxis
{
    Type = AxisTypes.Datetime,
    Title = new XAxisTitle { Text = "Date / Time" },
    TickmarkPlacement = Placement.On,
    Labels = new XAxisLabels
    {
        Formatter = @"function(){if((this.axis.getExtremes().max - this.axis.getExtremes().min) <= 86400000) {return Highcharts.dateFormat('%H:%M', this.value);} if((this.axis.getExtremes().max - this.axis.getExtremes().min) > 86400000 && (this.axis.getExtremes().max - this.axis.getExtremes().min) <= 1728000000) {return Highcharts.dateFormat('%m/%e %H:%M', this.value);} if((this.axis.getExtremes().max - this.axis.getExtremes().min) > 1728000000 && (this.axis.getExtremes().max - this.axis.getExtremes().min) <= 25920000000) {return Highcharts.dateFormat('%m/%e', this.value);} if((this.axis.getExtremes().max - this.axis.getExtremes().min) > 25920000000) {return Highcharts.dateFormat('%m/%y', this.value);}}",
    },
    TickPositioner = TickPositionerLarge,
    Events = { SetExtremes = "syncExtremes" }
    // 尝试过的其他写法均失败
    // Events = { SetExtremes = "syncExtremes(e)" }
    // Events = { SetExtremes = "{ trigger: 'syncExtremes' }" }
})
.SetCredits(new Credits { Enabled = false })
.SetSeries(new Series[]
{
    new Series { Name = "Temperature", Data = new Data(mynewArray), Type = ChartTypes.Line, Color = Color.Red }
})
.SetTitle(new Title
{
    Text = "Temperature",
    Align = HorizontalAligns.Center,
    Style = "fontSize: '16px',fontFamily: 'Rockwell'"
})
.SetLegend(new Legend { Enabled = false })
.SetYAxis(yAxis[0])
.SetSubtitle(new Subtitle
{
    Align = HorizontalAligns.Center
});
ltrChartTemperature.Text = chartTemp.ToHtmlString();

ASP前端代码 #

<div id="container1">
  <asp:Literal ID="ltrChartTemperature" runat="server"> </asp:Literal>
</div>

图表本身运行正常，仅需解决同步缩放的事件配置问题。

可行解决方案 #

1. 修正JS函数的转义问题 #

原函数中的&&是HTML转义字符，需替换为原生JS的&&，否则会导致函数执行报错：

function syncExtremes(e) {
    var thisChart = this.chart;

    const shouldShowResetZoom = !(e.min === undefined && e.max === undefined);

    if (e.trigger !== 'syncExtremes') { // 防止反馈循环
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // 更新时该值可能为null
                    chart.xAxis[0].setExtremes(
                        e.min,
                        e.max,
                        undefined,
                        false,
                        { trigger: 'syncExtremes' }
                    );
                }
            }

            if (shouldShowResetZoom && !chart.resetZoomButton) {
                chart.showResetZoom();
            } else if (!shouldShowResetZoom && chart.resetZoomButton) {
                chart.resetZoomButton = chart.resetZoomButton.destroy();
            }
        });
    }
}

2. 确保JS函数提前加载 #

将syncExtremes函数放在页面的<head>标签内，或放在Literal控件之前的位置，保证Highcharts初始化时函数已存在。

3. 修正后台SetExtremes配置 #

在C#的XAxis配置中，SetExtremes只需赋值为函数名称的字符串引用，Highcharts会自动传递事件对象：

.SetXAxis(new XAxis
{
    // 其他配置...
    Events = new XAxisEvents
    {
        SetExtremes = "syncExtremes"
    }
})

4. 统一所有图表的事件配置 #

确保所有需要同步缩放的图表，在后台配置X轴时都添加相同的SetExtremes = "syncExtremes"配置，这样任意一个图表缩放时，其他图表都会触发同步逻辑。

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