DevExtreme Chart Height and Opacity issue
I'm working with the DevExtreme charts from DevExpress for the first time and I'm very enthusiastic but I do have 2 issues I could not resolve. I have a chart which is defined as follows:
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
}
});
And HTML which is as follows:
<div id="containerTest" class="containers" style="width:460px"></div>
My issues are the following:
I want the constantLine with the average to be more prominent. I've tried to alter the opacity of the series and commonSeriesSettings but this has no effect. I've also tried to alter the z-index of the constantline but there seems to be no option for this.
The amount of rows in my final dataset can differ between 5 and 75. I'm currently unable to set the height of the chart so it always looks nice. If I set the height to support the maximum, the spacing between the bars (or the bars them self if I remove the equalBarWidth) becomes huge and if set the height somewhere in the middle the bars are crammed together. I want the width to be static but the height to be flexible.
Does someone has a solution for these issues?
Your solution is good. Just one thing, you can call chartTest.render() instead of setting size
$('#containerTest').height(800).dxChart('render');
I looked into this some more and came to the following. In my situation I can dynamicly adjust the height of a chart by counting the objects in my json object and using it as an multiplier.
Then i can use jQuery to set a new height of the container div and dynamicly setting the height of the chart.
$('#containerTest').height(newCalculatedHeight);
var chartTest = $('#containerTest').dxChart('instance');
chartTest.option({ size: { heigth: newCalculatedHeight } });
So this solves my second issue.
链接地址: http://www.djcxy.com/p/31008.html上一篇: 在图表DevExtreme中自定义标题