Bibliothèque JavaScript
Bibliothèque .NET officiel pour utiliser Highcharts depuis ASP.NET MVC
Licence payante!
Bibliothèque .NET pour utiliser Highcharts depuis ASP.NET. Licence MIT.
|
<head runat="server">
<!-- ... -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<asp:Literal id="myChart" runat="server"></asp:Literal>
|
|
protected void Page_Load(object sender, EventArgs e)
{
var chart = new Highcharts("chart")
.SetTitle(new Title { Text = "Health Manager" })
.SetSubtitle(new Subtitle() { Text = "Mon Sous-Titre" })
.SetXAxis(new XAxis
{
Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
})
.SetSeries(new[]
{
new Series
{
Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
},
new Series
{
Data = new Data(new object[] { ... })
}
});
myChart.Text = chart.ToHtmlString();
|
|
<head>
<script src="js/dark-unica.js"></script>
|
 |
Commenter la ligne import Highcharts from '../parts/Globals.js'; |
Color
Ajouter l'assembly System.Drawing
|
|
Color c = ColorTranslator.FromHtml("Red");
|
Afficher les valeurs de tous les points
|
|
var chart = new Highcharts("chart")
.SetPlotOptions(new PlotOptions
{
Line = new PlotOptionsLine
{
DataLabels = new PlotOptionsLineDataLabels
{
Enabled = true
}
}
});
|
Tooltips de la sourie
|
|
var chart = new Highcharts("chart")
.SetTooltip(new Tooltip { Shared = true, Crosshairs = new Crosshairs(true, false), Enabled = true });
// Shared: un tooltip pour toutes les courbes
// Crosshairs(x,y): trace une ligne
|
AxisTypes
L'axe X est du type Datetime, les données contiennent des paires date + valeur.
Chaque valeur est ainsi placée à la date qui lui est associée.
|
|
object[,] chartData = new object[dailyValues.Count, 2];
int i = 0;
foreach (var dv in dailyValues)
{
chartData1.SetValue(dv.Date, i, 0);
chartData1.SetValue(dv.Poids, i, 1);
i++;
}
var chart = new Highcharts("chart")
.SetXAxis(new XAxis { Type = AxisTypes.Datetime })
.SetYAxis(new YAxis
{
Labels = new YAxisLabels { Format = "{value} kg", Style = "color: '#999',fontWeight: 'bold'" },
Title = new YAxisTitle { Text = "Poids", Style = "color: '#AAA'" }
})
.SetSeries(new Series { Name = "Poids", YAxis = "0", Data = new Data(chartData) });
|
Permet de tracer une ligne.
|
|
var chart = new Highcharts("chart")
.SetYAxis(
new YAxis
{
PlotLines = new[]
{
new YAxisPlotLines
{
Value = Number.GetNumber(10),
Label = new YAxisPlotLinesLabel { Text = "Max" },
Color = ColorTranslator.FromHtml("Red"),
Width = Number.GetNumber(1)
}
}
})
.SetXAxis(
new XAxis
{
Type = AxisTypes.Datetime,
PlotLines = new[]
{
new XAxisPlotLines
{
Value = Number.GetNumber(
(double)new DateTimeOffset(new DateTime(2017, 1, 10, 0, 0, 0)).ToUnixTimeMilliseconds()),
Label = new XAxisPlotLinesLabel { Text = "Super date", Style = "color: 'orange'" },
Color = ColorTranslator.FromHtml("orange"),
Width = Number.GetNumber(1)
}
}
})
|
PlotBands
|
|
var chart = new Highcharts("chart")
.SetXAxis(
new XAxis
{
Type = AxisTypes.Datetime,
PlotBands = new[]
{
new XAxisPlotBands
{
From = Number.GetNumber(
(double)new DateTimeOffset(new DateTime(2017, 1, 10, 0, 0, 0)).ToUnixTimeMilliseconds()),
To = Number.GetNumber((double)DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()),
Label = new XAxisPlotBandsLabel { Text = "Période", Style = "color: 'orange'" },
Color = ColorTranslator.FromHtml("#372E24")
}
}
})
|
Erreurs
Not implemented serialization for type: Single
Data ne peut contenir des float, utiliser plutôt des double.
