2

互いに「ミラーリング」する 2 つのシリーズを持つ剣道棒グラフを作成しています。1 つの系列には負の値があり、その他の系列には正の値があります。ラベルをフォーマットするための私の選択肢は、（明らかなオプションのレビューに基づいて-私はhtml / javascriptの第一人者ではありません）制限されているようです。バーの値に沿って流れ、反対側に表示されるようにしたい (つまり、バーから離れている)。

これが私の現在のチャートです

<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/にもあります。

誰にも提案はありますか？とても有難い！！！

4

1 に答える 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/

于 2014-02-04T19:33:40.033 に答える