我正在为 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);
}
});