DevExtreme图表高度和不透明度问题
我正在首次使用DevExpress的DevExtreme图表，并且我非常热情，但我确实有两个问题无法解决。 我有一个图表，其定义如下：
var dataSourceTest = [
{ Name: "Name ABCDEF", ResultValue0: 190000 },
{ Name: "Name BCDEFG", ResultValue0: 130000 },
{ Name: "Name HIJKLM", ResultValue0: 150000 },
{ Name: "Name OPQRST", ResultValue0: 170000 },
{ Name: "Name ABCDE2", ResultValue0: 190000 },
{ Name: "Name BCDEF2", ResultValue0: 130000 },
{ Name: "Name HIJKL2", ResultValue0: 150000 },
{ Name: "Name OPQRS2", ResultValue0: 170000 },
{ Name: "Name ABCDE3", ResultValue0: 190000 },
{ Name: "Name BCDEF3", ResultValue0: 130000 },
{ Name: "Name HIJKL3", ResultValue0: 150000 },
{ Name: "Name OPQRS3", ResultValue0: 170000 },
{ Name: "Name OPQRS4", ResultValue0: 170000 },
{ Name: "Name ABCDE4", ResultValue0: 190000 },
{ Name: "Name BCDEF4", ResultValue0: 130000 },
{ Name: "Name HIJKL4", ResultValue0: 150000 },
{ Name: "Name OPQRS4", ResultValue0: 170000 }
];
$("#containerTest").dxChart({
dataSource: dataSourceTest,
rotated: true,
commonSeriesSettings: {
argumentField: "Name",
type: "bar"
},
series: [{
valueField: "ResultValue0",
name: "ResultValue0"
}],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center",
orientation: "horizontal"
},
tooltip: {
enabled: true
},
title: {
text: "Total",
font: { size: 20, family: 'Arial', weight: 400 }
},
equalBarWidth : {
width: 20,
spacing: 20
},
valueAxis: {
constantLines: [{
label: {
text: 'Average',
},
width: 2,
value: 150000,
color: 'red',
dashStyle: 'solid'
}],
opacity: 1
}
});
和HTML如下：
<div id="containerTest" class="containers" style="width:460px"></div>
我的问题如下：
我希望ConstantLine的平均值更突出。 我试图改变系列和commonSeriesSettings的不透明度，但这没有效果。 我也试图改变恒定线的z-索引，但似乎没有这个选项。
我的最终数据集中的行数可能在5到75之间不等。我目前无法设置图表的高度，因此总是看起来不错。 如果我将高度设置为支持最大值，则条之间的间距（或者如果我移除equalBarWidth，那么它们会自行排列）变得很大，如果将高度设置在中间的某个位置，则会将这些条粘在一起。 我希望宽度是静态的，但高度要灵活。
有人有解决这些问题的方法吗？
你的解决方案很好。 只有一件事，你可以调用chartTest.render()而不是设置大小
$('#containerTest').height(800).dxChart('render');
我进一步研究了这一点，并得出以下结论。 在我的情况下，我可以通过计算我的json对象中的对象并将其用作乘数来动态调整图表的高度。
然后我可以使用jQuery来设置容器div的新高度并动态设置图表的高度。
$('#containerTest').height(newCalculatedHeight);
var chartTest = $('#containerTest').dxChart('instance');
chartTest.option({ size: { heigth: newCalculatedHeight } });
所以这解决了我的第二个问题。
链接地址: http://www.djcxy.com/p/31007.html