JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container">
</div>
<button type="button" id="btnGerarGrafico" onclick="AjaxGrafico()">Gerar Grafico</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
JavaScript
<script type="text/javascript">
function AjaxGrafico() {
$.ajax({
url: '<%=ResolveUrl("high.aspx/GetGrafico")%>',
data: "{}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
MontarGrafico(data.d);
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
function MontarGrafico(data) {
var d = JSON.parse(data);
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Teste'
},
xAxis: {
categories: ['RAC 01']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: d
});
}
</script>