如何在aspx圖表控件中動畫柱狀圖？

-1

我已經使用asp圖表控件按鈕單擊顯示了一個柱狀圖。這是工作。現在，我想設置一些計時器，以便在頁面加載時使用計時器顯示每列（如動畫）。沒有使用任何庫，怎麼可能？如何在aspx圖表控件中動畫柱狀圖？

<asp:Chart ID="Chart1" Visible="false" runat="server" 
    BackColor="DarkRed" BackImageAlignment="Center" 
     BackImageTransparentColor="MediumVioletRed" BackSecondaryColor="White" 
     BorderlineDashStyle="DashDotDot" Palette="Excel" Height="390px" 
     Width="800px"> 
     <Titles> 
    <asp:Title Font="Times New Roman, 12pt, style=Bold" Name="Title1" ForeColor="White" 
     Text="Sample Test"> 
    </asp:Title> 
</Titles> 
<Series> 
<asp:Series Name="Series1" XValueMember="month" YValueMembers="sales" ChartType="Column" 
CustomProperties="DrawingStyle=LightToDark, DrawSideBySide=True" Color="#800033" IsValueShownAsLabel="True" LabelForeColor="#800033"> 
</asp:Series> 
    </Series> 
    <ChartAreas> 
    <asp:ChartArea Name="ChartArea1" BorderColor="Transparent">    
    </asp:ChartArea> 
    </ChartAreas> 
    </asp:Chart> 


    public void BindDatatoChart1() 
{ 
    Chart1.Visible = true; 
    DataTable dt = new DataTable(); 
    using (SqlConnection cn = obj.getcon()) 
    { 
     string sql = "select * from sample1 order by id"; 
     using (SqlCommand cmd = new SqlCommand(sql, cn)) 
     { 
      using (SqlDataAdapter da = new SqlDataAdapter(cmd)) 
      { 
       da.Fill(dt); 
      } 

     } 
    } 
    System.Timers.Timer timer = new System.Timers.Timer(); 
    timer.Interval = 15; 
    timer.Start(); 
    Chart1.DataSource = dt; 
    Chart1.DataBind(); 
    }

來源

2017-04-04 user2431727

這不是一個真正的ASP.NET問題。我想你應該從客戶端純粹考慮這一點。您可以使用純CSS動畫完成您想要的功能 - 而且您也可能需要，因爲ASP.NET是服務器端技術，因此不會爲您處理動畫。您可以使用css關鍵幀將列的初始高度設置爲0，然後在給定時間內過渡到100％。請參閱this Stack Overflow question。

來源

2017-04-05 05:57:07

好主意。你能幫我嗎？ – user2431727

嗯，事實是，你需要CSS選擇器爲你想要動畫的列，這就是爲什麼ASP.NET WebForms不是理想的問題，因爲你沒有完全控制HTML。您需要檢查圖表的標記並找到選擇列的方法。如果你能做到這一點，那麼我上面鏈接的方法應該告訴你如何去做。您可以使用transform：scale（x，y）CSS屬性來爲高度設置動畫。 –

如何在aspx圖表控件中動畫柱狀圖？

回答

相關問題