[英]how to bring Symbol-outline in pie chart using extjs
当我运行index.html时,我只会得到一个饼图,而没有颜色描述。 谁能告诉我如何带颜色符号轮廓,如下所示
我的代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Ext.chart.series.Pie Example</title>
<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
<script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
app.js
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 2
}, {
'name': 'metric five',
'data': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
您忘记添加图例配置
...
height: 350,
legend: {
position: 'right'
},
...
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store
UPD:
Ext.define('myStore', {
extend: 'Ext.data.Store',
model: 'myModel',
proxy: {
type: 'ajax',
api: {
read: '/urlhere'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
}
}
});
预期数据:{数据:此处为json数组,成功:是/否,总计:123}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.