Kendo Barchart 범주 레이블 값에 따라 좌우로

Question

두 개의 "거울"시리즈가있는 검도 막대 차트를 만듭니다. 한 시리즈는 음수 값과 다른 양수 값을가집니다. 레이블을 포맷하는 것에 대한 나의 선택은 제한적일 것입니다 (명백한 옵션에 대한 저의 리뷰를 기반으로합니다 - 나는 HTML/자바 스크립트 전문가가 아닙니다). 막대의 값으로 흐르게하고 반대쪽 (즉, 막대를 벗어남)으로 표시하려고합니다. http://jsfiddle.net/xamlfishet/3jNn5/1/

누구나 어떤 제안이 : 여기

그것은에서이기도 내 현재 차트

<div id="barchart"></div> 
function setUpCharts() 
     { 
      $("#barchart").kendoChart({    
       title: { 
        text: "Bar Chart" 
       }, 
       legend: { 
        visible: true, 
        position: "bottom" 
       }, 
       seriesDefaults: { 
        type: "bar", 
        stack: true 
       }, 
       series: [{ 
        data: [0, 0, .69, .29, .85], 
       }, { 
        data: [-.80, -.56, 0, 0, 0], 
       } 
       ], 
       categoryAxis: { 
        categories: ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5"], 
        majorGridLines: { visible: false }, 
       }, 
       valueAxis: { 
        numeric: true, 
        line: { visible: false }, 
        minorGridLines: { visible: true } 
       } 
      }); 
     } 

입니까? 매우 감사!!!

Answer 1

감사합니다. 바이올린을 포함 해 줘서 고마워! 미러링은 실제로 여기서 매우 까다 롭습니다. 먼저 데이터 항목과 시리즈를 연결해야합니다. 이 설정을 기반으로 가능하면 좋겠습니다.

$("#barchart").kendoChart({ 
    dataSource: { 
    data: [ 
     { field: "Cat 1", left: -.80, right: 0 }, 
     { field: "Cat 2", left: -.56, right: 0 }, 
     { field: "Cat 3", left: 0, right: .69 }, 
     { field: "Cat 4", left: 0, right: .29 }, 
     { field: "Cat 5", left: 0, right: .58 } 
    ], 
    } 
    series: [{ 
    field: "right" 
    }, { 
    field: "left" 
    }] 
}); 

이제 각 카테고리는 데이터 항목과 연결되어 있는지, 당신은 절대적으로 그 여부를 양 또는 음의 값을 기준으로 레이블의 위치를 ​​템플릿을 사용할 수 있습니다. 여기

categoryAxis: { 
    field: "field", 
    labels: { 
     template: function(e) { 
     if (e.dataItem.right === 0) { 
      return "<tspan style='position: absolute' dx='20'>" + e.value + "</tspan>" 
     } 
     else { 
      return "<tspan style='position: absolute' dx='-30'>" + e.value + "</tspan>" 
     } 
     } 
    }, 
    majorGridLines: { 
     visible: false 
    }, 
    }, 

는 ... 내가 브라우저에서이 유일한 작품 SVG를 지원하는 점에 유의해야한다 http://jsfiddle.net/7smar/1/