如何制作Extjs区域,折线图的曲线要有半径,因为它们的曲线太陡了
How to make Extjs area, line charts curves to have radius, as they are too sharply curved
我正在为Extjs开发一个混合图表组件,但曲线太尖锐了。我找不到曲线具有半径的配置。如果你处理过这样的事情,你能提供一些方法让曲线对我来说稍微平滑一点吗。这是我的代码:
Ext.define('Ext.vcops.rootCause.RootCauseScoreChart', {
extend : 'Ext.chart.Chart',
initMembers : function() {
this.store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'score', 'noiseIndex', 'line1', 'line2', 'line3'],
data: generateData()
});
this.axes = [{
type: 'Numeric',
minimum: 0,
maximum: 100,
constrain: false,
dashSize: 0,
majorTickSteps: 7,
position: 'left',
title: 'Score',
grid: true
},{
type: 'Category',
position: 'bottom',
grid: true,
label: {
renderer: function(name) {
return '';
}
}
}];
this.series = [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['score'],
style: {
opacity: 1
}
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
xField: 'name',
yField: 'noiseIndex',
style: {
stroke: '#000000',
'stroke-width': 1,
opacity: 1,
'stroke-dasharray': 10
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line1',
style: {
stroke: '#FFDD16',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line2',
style: {
stroke: '#F1592A',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line3',
style: {
stroke: '#EE1C25',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}];
this.themeAttrs.colors = ["#65B9E0", "#94ae0a", "#115fa6", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];
},
initComponent : function() {
this.initMembers();
var config = {
insetPadding: 0,
legend: {
position: 'right',
boxStroke : 'transparent',
boxFill: 'transparent'
},
listeners: {
select: {
fn: function(me, selection) {
//TODO zoom logi here
}
}
}
};
Ext.apply(this, Ext.apply(config, this.initialConfig));
Ext.vcops.rootCause.RootCauseScoreChart.superclass.initComponent.apply(this, arguments);
}
});
我使用fill=true的折线图,它的效果与面积相同,但有弯曲的面积。
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.application({
name: 'PanelHeaderItems',
launch: function() {
var graphStore = Ext.create('Ext.data.Store', {
fields: ['kg', 'ha'],
data: [{
"kg": "0.23",
"ha": "90"
}, {
"kg": "0.4",
"ha": "20"
}, {
"kg": "0.6",
"ha": "70"
}, {
"kg": "0.8",
"ha": "56"
}, {
"kg": "0.95",
"ha": "100"
}]
});
wizardStep3Chart = new Ext.chart.CartesianChart({
width: 400,
height: 300,
animation: true,
store: graphStore,
legend: {
position: 'right'
},
axes: [{
type: 'numeric',
position: 'left',
grid: true,
fields: ['ha'],
renderer: function(v) {
return v;
}
}, {
type: 'numeric',
position: 'bottom',
grid: true,
adjustByMajorUnit: false,
fields: ['kg'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'line',//<-----------
smooth:true,//<-----------
fill:true,//<-----------
axis: 'left',
xField: 'kg',
yField: 'ha',
style: {
opacity: 0.80
},
highlight: {
fillStyle: '#125489',
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
}
}
}],
renderTo: Ext.getBody()
});
}
});
}
});
在线系列上使用smooth: true
选项。
相关文章:
- onclick函数需要双击,因为类分配延迟
- 在ES6中,模块将导致多个网络调用,因为两个模块不能在单个文件中定义
- 如何获得Bootstrap Datepicker的年和月,因为它在变化
- ACE编辑器正在删除模块,因为define是't一根绳子
- 未能加载,因为找不到支持的源.当播放HTML5音频元素时
- 任何人都知道IE7设置或更新/补丁,它可以防止IE因为jquery错误而无法加载页面
- "未捕获类型错误/丢弃意外“;因为一句台词而出现?(HTML w/<脚本>)
- CKeditor预览插件.js,为Chrome和IE进行编辑.因为它拒绝CSS样式
- 如何在d3力布局中使直线而不是曲线
- Rails服务器因为uglifier gem而失败
- 缓存javascript失败,因为使用了外部javascript
- D3.js:设置贝塞尔曲线的动画
- 拒绝在框架中显示,因为它设置了'X-Frame-Options'到'拒绝'在JavaSc
- 如何通过单击点之间的样条曲线来选择样条曲线中的序列
- 无法使用 ant 和闭包编译器编译 javascript,因为 Jquery 的 $ 是未声明的
- 为什么我的 ajax 调用没有生成,因为我包含 ajax 的 js 文件包含在 iframe 中
- 无法查看内容,因为尚未收到数据
- 我如何将多个 svg 隐藏到一个 png 中,因为它们在 html 上
- 无法使用 navigator.geolocation,因为“只允许安全源”
- 如何制作Extjs区域,折线图的曲线要有半径,因为它们的曲线太陡了