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. 平均の定数線をもっと目立たせたい。シリーズと commonSeriesSettings の不透明度を変更しようとしましたが、これは効果がありません。また、定数行の z-index を変更しようとしましたが、これにはオプションがないようです。

  2. 最終的なデータセットの行数は、5 ～ 75 の間で異なる場合があります。現在、グラフの高さを設定できないため、常に見栄えがします。最大値をサポートするように高さを設定すると、バー (または equalBarWidth を削除するとバー自体) の間の間隔が大きくなり、高さを中央のどこかに設定すると、バーがぎゅうぎゅう詰めになります。幅は静的に、高さは柔軟にしたい。

誰かがこれらの問題の解決策を持っていますか?

4

2 に答える 2

4
  1. 定数行に z-index (または同様のもの) を設定するオプションはまだありません。

  2. あなたの解決策は良いです。chartTest.render()1つだけ、サイズを設定する代わりに 呼び出すことができます

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