Fusion Chart交换

Question

我尝试过做一个熔合图交换，但是asp不喜欢这样做。因此，下一个最好的方法是渲染融合图表，然后使用onmousedown将图表替换为图像。但这并不能很好地工作。我尝试在代码周围添加div并使用id，但交换不起作用。我在document.popChartDiv.src中使用了'popChartDiv‘，但是这个ID调用了Literal3的呈现。我不确定如何使用下面的两个div (testimage.png和tstiage1.png)来切换Literal3。似乎图表是焦点，图像无法覆盖图表。我也尝试过使用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索引。

在纯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>