2012-08-23 21 views
5

sto cercando un metodo per associare i dati al grafico a tortaCome usare dotnet highcharts dll per mostrare HighCharts in MVC3?

Public ActionResult Charts 
    { 
     Highcharts chart = new Highcharts("chart") 
     .InitChart(new Chart { PlotShadow = false }) 
     .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" }) 
     .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" }) 
     .SetPlotOptions(new PlotOptions 
     { 
      Pie = new PlotOptionsPie 
      { 
       AllowPointSelect = true, 
       Cursor = Cursors.Pointer, 
       DataLabels = new PlotOptionsPieDataLabels 
       { 
        Color = ColorTranslator.FromHtml("#000000"), 
        ConnectorColor = ColorTranslator.FromHtml("#000000"), 
        Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" 
       } 
      } 
     }) 
     .SetSeries(new Series 
     { 
      Type = ChartTypes.Pie, 
      Name = "Browser share", 
      Data = new Data(new object[] 
            { 
             new object[] { "Firefox", 45.0 }, 
             new object[] { "IE", 26.8 }, 
             new DotNet.Highcharts.Options.Point 
             { 
              Name = "Chrome", 
              Y = 12.8, 
              Sliced = true, 
              Selected = true 
             }, 
             new object[] { "Safari", 8.5 }, 
             new object[] { "Opera", 6.2 }, 
             new object[] { "Others", 0.7 } 
            }) 
          }); 
     } 
    } 

    public JsonResult GetData() 
    { 
     int Param1; 
     Param1 = 1;  
     var reports = db.ExecuteStoreQuery<ResourceReports>("ResourceReports @EmployeeID", new SqlParameter("@EmployeeID", Param1)).ToList(); 
     return Json(reports, JsonRequestBehavior.AllowGet); 
    } 

voglio sostituire

.SetSeries(new Series 
    { 
     Type = ChartTypes.Pie, 
     Name = "Browser share", 
     Data = new Data(new object[] 
            { 
             new object[] { "Firefox", 45.0 }, 
             new object[] { "IE", 26.8 }, 
             new DotNet.Highcharts.Options.Point 
             { 
              Name = "Chrome", 
              Y = 12.8, 
              Sliced = true, 
              Selected = true 
             }, 
             new object[] { "Safari", 8.5 }, 
             new object[] { "Opera", 6.2 }, 
             new object[] { "Others", 0.7 } 
            }) 
     }); 
    } 

con la mia GetData() come posso fare questo, i dati in .SetSeries dovrebbe essere il mio dati restituiti in GetData method

risposta

2

Sembra che si stia utilizzando Dotnet.Highcharts. È possibile creare un elenco di Series e un elenco di Point.

List<Series> mySeries = new List<Series>(); 
List<Point> myPoints = new List<Point>(); 

vorrei ciclo attraverso ogni serie è necessario creare e generare i dati del punto in questo modo:

myPoints.Add(new Point { 
    X = (detailRec.RecordTime - new DateTime(1970, 1, 1, 0, 0, 0)).TotalMilliseconds, 
    Y = detailRec.TotalCount 
}); 

allora si potrebbe creare la serie stessa utilizzando l'elenco dei punti per i suoi dati in questo modo:

mySeries.Add(new Series{ 
    Name = distinctDistrict.Name, 
    Data = new Data(myPoints.ToArray()) 
}); 

Quindi per impostare la serie è possibile utilizzare la seguente dichiarazione:

.SetSeries(mySeries.Select(s => new Series { 
    Name = s.Name, 
    Data = s.Data 
}).ToArray()) 

Se si utilizza il browser degli oggetti in Visual Studio, è possibile visualizzare le altre proprietà e i metodi della classe Series e Point. Per utilizzare il codice di cui sopra si dovrà includere le seguenti istruzioni using:

using DotNet.Highcharts; 
using DotNet.Highcharts.Enums; 
using DotNet.Highcharts.Helpers; 
using DotNet.Highcharts.Options; 
using Point = DotNet.Highcharts.Options.Point; 
+0

@Tommmy Johnson ..... La mia domanda era .SetSeries dovrebbero essere i miei dati restituiti nel metodo GetData – SoftwareNerd

+3

non si può restituire un ' SetSeries' è un metodo per impostare la serie. Comunque puoi restituire un oggetto 'Series'. Nell'esempio sopra restituiresti 'mySeries'. Quindi usalo nel metodo 'SetSeries' per aggiungere la tua serie al grafico. –