DevExpress - DevExtreme 차트 높이 및 불투명도 문제

저는 DevExpress에서 처음으로 DevExtreme 차트 작업을하고 있습니다. 매우 열정적이지만 해결할 수없는 2 가지 문제가 있습니다. I는 다음과 같이 정의 된 차트는 다음과 같습니다DevExpress - DevExtreme 차트 높이 및 불투명도 문제

<div id="containerTest" class="containers" style="width:460px"></div>

내 문제는 다음과 같습니다 :

나는 constantLine에 원하는 다음과

 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 평균이 더 두드러진다. 시리즈 및 commonSeriesSettings의 불투명도를 변경하려고 시도했지만 효과가 없습니다. 나는 또한 constantline의 z-index를 변경하려고 시도했으나 이것을위한 옵션이없는 것으로 보인다.

최종 데이터 세트의 행의 양은 5와 75 사이에서 달라질 수 있습니다. 차트의 높이를 설정할 수 없어서 항상 멋지게 보입니다. 높이를 최대로 설정하면 막대 (또는 equalBarWidth를 제거하면 막대 자체) 사이의 간격이 커지고 막대 중간에 높이를 설정하면 막대가 함께 묶입니다. 폭은 정적이지만 높이는 유연해야합니다.

누군가 이러한 문제에 대한 해결책을 갖고 있습니까?

출처

2014-10-21 pabes

상수 라인에는 아직 Z- 색인 (또는 유사한 항목)을 설정하는 옵션이 없습니다.
당신의 해결책은 좋습니다. 다만 한 가지, 당신은 대신 설정 크기의 chartTest.render()를 호출 할 수 있습니다
```
$('#containerTest').height(800).dxChart('render'); 
```

출처

2014-10-22 06:27:42

나는 이것을 좀더 들여다 보니 다음과 같이 나왔습니다. 필자의 경우 json 오브젝트의 오브젝트를 세고 승수로 사용하여 동적으로 차트의 높이를 조정할 수 있습니다.

그럼 jQuery를 사용하여 컨테이너 div의 새 높이를 설정하고 동적으로 차트의 높이를 설정할 수 있습니다.

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

이렇게하면 내 두 번째 문제가 해결됩니다.

출처

2014-10-21 10:55:51 pabes

DevExpress - DevExtreme 차트 높이 및 불투명도 문제

답변

관련 문제