Question

我第一次使用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-index，但似乎没有选择。
我的最终数据集中的行数可以在5到75之间不等。我目前无法设置图表的高度，因此它总是很好看。如果我将高度设置为支持最大值，则条形之间的间距（如果我移除了equalBarWidth，它们自身的条形）变得很大，如果将高度设置在中间的某个位置，则条形被挤在一起。我希望宽度是静态的，但高度要灵活。

有人有解决这些问题的方法吗？

Answer 1

没有选项可以为常量线设置z-index（或类似的东西）。
您的解决方案很好。只需一件事，您可以拨打chartTest.render()而不是设置尺寸
```
$('#containerTest').height(800).dxChart('render');
```

Answer 2

我对此进行了一些调查，并得出以下结论。在我的情况下，我可以通过计算json对象中的对象并将其用作乘数来动态调整图表的高度。

然后我可以使用jQuery设置容器div的新高度并动态设置图表的高度。

$('#containerTest').height(newCalculatedHeight);
var chartTest = $('#containerTest').dxChart('instance');
chartTest.option({ size: { heigth: newCalculatedHeight } });

所以这解决了我的第二个问题。

DevExpress - DevExtreme图表高度和不透明度问题

2 个答案: