Całość sprowadza się, do odniesienia się do wgrania zew. biblioteki rys.
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>wybrania miejsca, w którym ma się ten wykres narysować:
<div id="piechart" style="width: 900px; height: 500px;"></div>stworzenia metody rysującej oraz "podpięcie" jej pod delegata:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
Ok.Mamy javascript, mamy jsfiddle, na którym możemy przetestować nasz odpowiednik wykresu, a nawet kilka wykresów pod sobą. A co jeżeli jako źródło danych, chcieli byśmy wykorzystać model z naszego ASP.MVC ??
Na szczęście istnieje znacznik (tag) <text> </text> który możemy wykorzystać.
Poniżej przykład takiej metody:
function drawCurrency() {
@if (Model.Tasks != null && Model.Tasks.Count > 0)
{
<text>
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
@foreach (var task in @Model.Tasks)
{
<text>
['@task.name', parseFloat('@task.hour')],
</text>
}
]);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
</text>
}
}
Uwaga. Jak donosi ekipa bookrage "kod wysyła śledzące ciasteczka od Google... (Google Charts API),".
OdpowiedzUsuńReasumując - nie używać biblioteki Google Charts.