비동기 C# 메서드 호출 디버그 작업을하지만, 여기에

Question

확인을 라이브 사이트에서 작동하지 않는 것은 상황 지난 12 개월 간 판매 데이터의 일반적인 추세를 보여주는 스파크 라인 그래프가 있습니다. 각 페이지에는 특정 세일즈맨의 고객 목록이 표시되며 막대한 수의 행 = 엄청난 수의 스파크 라인 (예 : 특히 125 개는로드하는 데 15 초 걸림)이있는 고객이 많습니다.

이러한 이유 때문에 jQuery sparklines을 사용할 수 없습니다. IE에서 스파크 라인이 많은 페이지에 액세스하는 사용자의 CPU를 완전히 고정 시켰습니다.

두 가지 문제를 제외하고는 훨씬 더 나은 Google Chart API을 사용했습니다 : 1) 보안 사이트에 있고 Google Chart API URL은 HTTP를 통해서만 제공됩니다 (작은 래퍼 스크립트를 사용하여 해결됨). 그래프를 동적으로 다운로드하고 보안 서버에서 다시 제공). 2) 125 개의 스파크 라인이있는 페이지에서는 요청 수가 많아서 사용 가능한 연결 수를 최대화하기 위해 0-9 서버 접두어를 사용하는 경우에도 여전히 매우 느립니다.

그래서 내 다음 단계는 비동기 적으로 "다운로드/잡아/재사용 이미지"메서드 호출을 시도하는 것입니다.

... 디버그 모드로 실행중인 내 dev 상자에서만.

라이브 사이트로 밀어 넣을 때 더 빠르지 만 언로드 된 일부 이미지는 물론 허용되지 않습니다. 그래서 여기

내가 일부 SO 유능한 알고 있었으면 좋겠습니다 것입니다 :

1) 디버깅하지만 라이브 사이트에서 작동하지 않는 동안 왜 비동기 방식이 작동 호출된다?

2) 많은 수의 스파크 라인을 보안 서버에 빠르게로드하여 머리카락을 찢어 내고 싶지 않은 쉬운 방법이 있습니까?

2a.) 누구든지 ASP.NET 차트 라이브러리를 사용해 본 경험이 있습니까? 내가 조사해야 할 것이 있나요?

2b.) 공동 작업자는 1x1 CSS 배경 이미지를 사용하고 높이를 변경하여 내 스파크 라인 루틴을 만들 것을 제안했습니다. 문제는 a) 우리가 변경하기를 원한다면 완전히 확장 할 수 없다. b) 그것은 악의로 보인다 (마크 업에서 sparkline 당 bajillion DIV에 관해서 떠난다.); c) 한 페이지에 100-200 개가있을 때 충분히 빠르지는 모르겠다. 1x1 스프라이트 접근 방식의 실현 가능성에 대한 귀하의 생각은 무엇입니까?

미리 감사드립니다.

Answer 1

ASP.Net 차트는 내 경험에 잘 맞습니다. 스파크 라인을 렌더링하는 데 필요한 구성을 시작하려면 빠른 시작자가 http://betterdashboards.wordpress.com/2010/02/21/how-to-create-a-sparkline-chart-in-asp-net/입니다.

편집 : MVC에서 ASP.Net 차트를 사용하여 샘플을 추가했습니다. 분명히 당신은이 코드의 일부를 어떤 종류의 도우미 클래스로 옮기고 싶을 것이다.하지만 잘하면이 일을하기 위해 어떤 일이 일어나는지 분명하게 알 수있다.

@model IEnumerable<CustomerSales>   
@using Chart = System.Web.UI.DataVisualization.Charting.Chart 
@{  
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Sales 
     </th> 
    </tr> 

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      @item.Name 
     </td> 
     <td> 
      @{ 

    var chart = new Chart(); 
    chart.ChartAreas.Add(new ChartArea()); 
    chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisX.LineWidth = 0; 
    chart.ChartAreas[0].AxisY.LineWidth = 0; 

    chart.Series.Add(new Series()); 
     // Assign the random number to the chart to create 35 points 
    for (int x = 0; x < item.Sales.Length; x++) 
    { 
     chart.Series[0].Points.AddXY(x, item.Sales[x]); 
    } 

    // Start hiding both sets of axes, labels, gridlines and tick marks 
    chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisX.LineWidth = 0; 
    chart.ChartAreas[0].AxisY.LineWidth = 0; 

    // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart 
    chart.Series[0].ChartType = SeriesChartType.Spline; 

    // Since the line is the only thing you see on the chart, you might want to 
    // increase its width.&nbsp; Interestingly, you need to set the BorderWidth property 
    // in order to accomplish that. 
    chart.Series[0].BorderWidth = 2; 

    // Re-adjust the size of the chart to reduce unnecessary white space 
    chart.Width = 400; 
    chart.Height = 100; 
    string base64; 
    using (MemoryStream ms = new MemoryStream()) 
    { 
     chart.SaveImage(ms); 
     var bytes = ms.GetBuffer(); 
     base64 = Convert.ToBase64String(bytes); 
    } 
/** 
    * Here's a simpler example that would do a regular chart, 
    * rather than a sparkline. No way to make the gridlines and axes go 
    * away with this helper that I'm aware of. 

    var chart = new Chart(
     width: 300, 
     height: 100 
     ) 
     .AddSeries(chartType: "Spline", yValues: item.Sales); 
    var bytes = chart.GetBytes(); 
    var base64 = Convert.ToBase64String(bytes);  
      */ 
       } 
      <img src="data:image/jpeg;base64,@base64" /> 
     </td> 
    </tr> 
} 

</table> 

이

처럼 보이는 모델을 사용하고있는 모든 비동기의

public class CustomerSales 
{ 
    public CustomerSales(string name, params int[] sales) 
    { 
     Name = name; 
     Sales = sales; 
    } 
    [Required] 
    public string Name { get; set; } 
    [Required] 
    public int[] Sales { get; set; } 
}