2

我第一次使用 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>

我的问题如下：

  1. 我希望具有平均值的 constantLine 更加突出。我试图改变系列和 commonSeriesSettings 的不透明度，但这没有效果。我也尝试过更改常量线的 z-index，但似乎没有选择。

  2. 我的最终数据集中的行数可能在 5 到 75 之间。我目前无法设置图表的高度，所以它总是看起来不错。如果我将高度设置为支持最大值，则条形之间的间距（或者如果我删除 equalBarWidth，则它们自身的条形）会变得很大，如果将高度设置在中间的某个位置，则条形会挤在一起。我希望宽度是静态的，但高度是灵活的。

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

4

2 回答 2

4
  1. 目前还没有为常量线设置 z-index （或类似的东西）的选项。

  2. 你的解决方案很好。只有一件事，您可以调用chartTest.render()而不是设置大小 

    $('#containerTest').height(800).dxChart('render');
于 2014-10-22T06:27:42.407 回答
2

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

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

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

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

于 2014-10-21T10:55:51.483 回答