78 строки
2.8 KiB
HTML
78 строки
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" language="javascript">
|
|
$(function ()
|
|
{
|
|
$("#container").ejChart(
|
|
{
|
|
//Initializing Series
|
|
series:
|
|
[
|
|
{
|
|
points: [{ x: 'Other Personnal', y: 94658, text: 'Other Personal, 88.47%' },
|
|
{ x: 'Medical care', y: 9090, text: 'Medical care, 8.49%' },
|
|
{ x: 'Housing', y: 2577, text: 'Housing, 2.40%' },
|
|
{ x: 'Transportation', y: 473, text: 'Transportation, 0.44%' },
|
|
{ x: 'Education', y: 120, text: 'Education, 0.11%' },
|
|
{ x: 'Electronics', y: 70, text: 'Electronics, 0.06%' }],
|
|
marker:
|
|
{
|
|
dataLabel:
|
|
{
|
|
visible:true,
|
|
shape: 'none',
|
|
connectorLine: { type: 'bezier',color: 'black' },
|
|
font: {size:'14px'},
|
|
enableContrastColor:true
|
|
}
|
|
},
|
|
border :{width:2, color:'white'},
|
|
name: 'Expenses',
|
|
type: 'pie',
|
|
enableAnimation : true,
|
|
labelPosition:'outsideExtended',
|
|
enableSmartLabels:true, startAngle:145
|
|
}
|
|
],
|
|
load: "loadTheme",
|
|
seriesRendering:"seriesRender",
|
|
title:{text: 'Expenditures'},
|
|
isResponsive: true,
|
|
size: { height: "600"},
|
|
legend: { visible: false}
|
|
});
|
|
});
|
|
|
|
function seriesRender(sender)
|
|
{
|
|
if(sender.model.theme=="flatdark" || sender.model.theme=="gradientdark" || sender.model.theme == "high-contrast-01")
|
|
sender.data.series.marker.dataLabel.connectorLine.color="white";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|