2013-11-01 102 views
2

我正在構建Kendo條形圖,其中有兩個「鏡像」系列的條形圖。一個系列具有負值和其他正值。我對格式化標籤的選擇似乎有限(基於我對顯而易見的選項的評論 - 我不是HTML/JavaScript專家),讓他們在一邊或另一邊。我真的希望讓他們流動的酒吧的價值和出現對面(即清除酒吧)。基於價值的左右Kendo條形圖類別標籤

這是我當前圖表

<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 } 
       } 
      }); 
     } 

這也是在:http://jsfiddle.net/xamlfishet/3jNn5/1/

任何人有什麼建議?非常感激!!!

回答

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 
    }, 
    }, 

這裏是工作提琴... http://jsfiddle.net/7smar/1/

+0

我要指出,在瀏覽器中這隻能支持SVG。在IE 8及以下版本中,我不知道會發生什麼 - 但我的猜測是它不會很好。 –