DevExpress - проблема высоты и непрозрачности диаграммы DevExtreme

Я впервые работаю с диаграммами DevExtreme от DevExpress, и я полон энтузиазма, но у меня есть 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) станет огромным, а если установить высоту где-то посередине, полосы будут забиты вместе. Я хочу, чтобы ширина была статической, а высота была гибкой.

Есть ли у кого-нибудь решение этих проблем?


jquery devexpress devextreme
person pabes    schedule 21.10.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

  1. Пока нет возможности установить z-index (или что-то подобное) для постоянных линий.

  2. Ваше решение хорошее. Только одно: вы можете вызвать chartTest.render() вместо установки размера

    $('#containerTest').height(800).dxChart('render');
person Pavel Gruba    schedule 22.10.2014

arrow_upward
2
arrow_downward

Я изучил это еще немного и пришел к следующему. В моей ситуации я могу динамически регулировать высоту диаграммы, подсчитывая объекты в моем объекте json и используя его в качестве множителя.

Затем я могу использовать jQuery, чтобы установить новую высоту контейнера div и динамически установить высоту диаграммы.

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

Так что это решает мою вторую проблему.

person pabes    schedule 21.10.2014