融合图表交换

Question

我曾尝试进行融合图表交换，但 asp 不喜欢这样做。因此，下一个最好的方法是渲染融合图表，然后使用 onmousedown 将图表替换为图像。只是这不起作用。我尝试在代码周围添加 div 并使用 id，但交换不起作用。我在 document.popChartDiv.src 中使用了“popChartDiv”，但这个 ID 是调用 Literal3 渲染的原因。我不确定如何使用下面的 2 个 div 切换 Literal3（testimage.png 和 testimage1.png）。图表似乎是焦点，图像无法覆盖图表。我也尝试过使用 z-index 但这没有用。所以我被卡住了。

<div style="width:798px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;" id="popChartDiv">
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
    <div id="popChartContainer"></div>
    <asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal>
         <div id="line3ChartContainer"></div>
         <asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal>
         <img src="/images/testimage.png" width="798" height="250" name="swap"/>
</div>
<div style="width:38px; height:250px; float:left;">
    <img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.swap.src='/images/testimage.png';"/>
    <img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.swap.src='/images/testimage1.png';"/> 
    <script type="text/javascript">
        $('#labor').hover(function () {
            $(this).attr('src', '/images/labortabhover.png');
        }, function () {
            $(this).attr('src', '/images/labortab.png');
        });

        $('#odc').hover(function () {
            $(this).attr('src', '/images/odctabhover.png');
        }, function () {
            $(this).attr('src', '/images/odctab.png');
        });


        </script>
</div>

Answer 1

如果您正在渲染基于 Flash 的图表，则可能是窗口模式 (wMode) 设置为 window。有一个Adobe help article on SWF stacking order 指出当窗口模式参数设置为window 时，SWF 对象的 z-Index 将被忽略。

在纯 ASP.NET (C#) 中，如果您使用 RenderChart 方法，那么将第九个参数设置为 true（或 false）应该会对您有所帮助。参考creating first chart using C# documentation article of FusionCharts中的相关部分。

如果您更习惯使用 JavaScript，您可以尝试在图表上调用 setTransparent(false); 将 wMode 设置为不透明或透明。

假设您的图表 id 是 line3Chart，代码将是

<script type="text/javascript">
    // Add this code snippet. Make sure to replace
    // "line3Chart with correct chart id
    FusionCharts("line3Chart").setTransparent(false);

    $('#labor').hover(function () {
        $(this).attr('src', '/images/labortabhover.png');
    }, function () {
        $(this).attr('src', '/images/labortab.png');
    });

    $('#odc').hover(function () {
        $(this).attr('src', '/images/odctabhover.png');
    }, function () {
        $(this).attr('src', '/images/odctab.png');
    });
</script>