如何使我的ASP图表滚动的x方向 [英] How to make my asp chart scrollable in the x direction

问题描述

我有一个asp的图表看起来像这样：

I have an asp chart which looks like this:

<asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
  BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
  BackSecondaryColor="White" Height="700px" Width="1800px" onload="Chart1_Load" 
                    style="margin-top: 0px; margin-left: 10px; OVERFLOW-X:scroll;">

    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>      
    </ChartAreas>
    <Titles>
        <asp:Title Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" Name="Title1" 
                                    Text="Graph" ForeColor="Blue">
        </asp:Title>
    </Titles>
</asp:Chart>

你可以看到我已经添加了一些CSS我本以为这使我的图表滚动：

as you can see I've added some css which I thought would make my chart scrollable:

OVERFLOW-X：滚动;

OVERFLOW-X:scroll;

但是，这是行不通的。我也试着封装这个图表中一个div，使DIV滚动，但是，使图表延伸出的页面。我怎样才能让这个图表滚动的页面中，仍然保持我的图表尺寸（700像素由1800px）

However, this doesn't work. I've also tried to encapsulate this chart in a div and make the div scrollable but that makes the chart extend out of the page. How can I make this chart scrollable within the page and still keep my chart dimensions (700px by 1800px)

推荐答案

我能够以添加滚动添加此jQuery和它的工作很大的：

I was able to add this jquery in order to add a scroll and it worked great:

<script class="code" language="javascript" type="text/javascript">
    $(document).ready(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });

    $(window).resize(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });
</script>

我也包括我的图表在这样一个div：

I also included my chart in a div like this:

<div id="chartdiv" style="overflow-x: scroll;">
    CHART GOES HERE
</div>

这篇关于如何使我的ASP图表滚动的x方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！