4

Telerik Donut Chart のラベル位置をカスタマイズしたいのですが、期待される画像のように見えるはずです。いくつかの設定を試しましたが、ラベルの位置を調整できません poc image を参照してください。

質問 - 期待される画像のようにラベルの位置を変更するにはどうすればよいですか。5、10、15、20、25、... 2 番目のリングの外側が必要で、ラベルは各カテゴリの最後にする必要があります。

期待される

ここに画像の説明を入力

POC

ここに画像の説明を入力

コード 

$("#chart").kendoChart({
  legend: {
    visible: false
  },
  chartArea: {
    background: ""
  },
  seriesDefaults: {
    type: "donut",
    startAngle: 90,
    labels:{
      template: "#= category #",
    }
  },
  series: [{
    name: "abc",
    size:50,
    margin:2,
    data: [{
      category: "abc1",
      value: 50,
      color: "#7FBA00"
    },{
      category: "abc2",
      value: 20,
      color: "#007233"
    },{
      category: "abc3",
      value: 30,
      color: "#D2D2D2"
    }]
  }, {
    name: "xyz",
    size:10,
    data: [{
      category: "5",
      value: 10,
      color: "#ccc"
    },{
      category: "10",
      value: 10,
      color: "#AFAFAF"
    },{
      category: "15",
      value: 10,
      color: "#ccc"
    },{
      category: "20",
      value: 10,
      color: "#AFAFAF"
    },{
      category: "25",
      value: 10,
      color: "#ccc"
    },{
      category: "30",
      value: 10,
      color: "#AFAFAF"
    }],
    labels: {
      visible: true,
      background: "transparent",
      position: "center"
    }
  }]
});
4

1 に答える 1

4

希望する特定の配置を設定するオプションは知りませんが、Telerik をだましてそれを実行させることはできます。重要なのは、背景色のない 3 番目の外側のドーナツにラベルを配置し、ラベルが不要になった 2 番目の (交互の灰色) ドーナツと一致するようにスライスの値を配置することです。

ここに画像の説明を入力

$("#chart").kendoChart({
  legend: {
    visible: false
  },
  chartArea: {
    background: ""
  },
  seriesDefaults: {
    type: "donut",
    startAngle: 90,
    labels:{
      template: "#= category #",
    }
  },
  series: [{
    name: "yourData",
    size:50,
    margin:2,
    data: [{
      category: "abc1",
      value: 50,
      color: "#7FBA00"
    },{
      category: "abc2",
      value: 20,
      color: "#007233"
    },{
      category: "abc3",
      value: 30,
      color: "#D2D2D2"
    }]
  }, {
    name: "grayAxis",
    size:10,
    data: [{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    },{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    },{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    }]
  } , {
    name: "numbers",
    size:10,
    data: [{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "5",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "10",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "15",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "20",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "25",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "X",
      value: 1,
      color: "none"
    }],
    labels: {
      visible: true,
      background: "transparent",
      template: "#= category #",
      position: "center"
    } 
  }]
});

もちろん、"X" を "" に置き換えて空の上部ラベルを取得することもできます。3 番目のドーナツの値を調整して、よりきれいに収まるようにすることもできます。原点を 90 度からたとえば 89.5 度に移動することもできます。 3番目のドーナツで使用したのと同じ9 + 1スキームを2番目のドーナツでも使用して、灰色と小さな白いセパレーターのレイアウトなどを取得できます.

いずれにせよ、それが私が行く方法です: 2 番目のドーナツを好きなように見せ、基本的に見えない 3 番目のドーナツを使用して軸ラベルを配置します。

いいですね。

于 2015-01-12T20:12:10.150 に答える