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

【问题标题】：DevExpress - DevExtreme Chart Height and Opacity issueDevExpress - DevExtreme 图表高度和不透明度问题
【发布时间】：2014-10-21 08:09:48
【问题描述】：

我是第一次使用 DevExpress 的 DevExtreme 图表，我非常热情，但我确实有 2 个问题无法解决。我有一个定义如下的图表：

        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，则它们自身的条形）会变得很大，如果将高度设置在中间的某个位置，则条形会挤在一起。我希望宽度是静态的，但高度是灵活的。

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

【问题讨论】：

标签： jquery devexpress devextreme

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：