Question

我创建了一个源自供应商提供的fork的小提琴。我想只在较小的图表段的标签显示在外面，如左图所示。这符合柱形图的预期效果。在开始摆弄canvas.js源代码之前，有没有更简单的方法来做到这一点。

右边是我的图表，使用此代码

var chart = new CanvasJS.Chart("chartContainer",
{

  data: [
  {
    type: "doughnut",
    dataPoints: [
    {  y: 1,indexLabel:"A",indexLabelPlacement:"outside"},
    {  y: 50,indexLabel:"B",indexLabelPlacement:"inside"},
    {  y: 28 ,indexLabel:"C",indexLabelPlacement:"inside"},
    {  y: 31 ,indexLabel:"D",indexLabelPlacement:"inside"},

    ]
  }
  ]
});

chart.render();

我创建的小提琴找到here

Answer 1

在深入了解canvas.js代码之前，我再次访问谷歌并偶然发现了一个丰富的库ZingChart，它正是我正在寻找的东西（混合标签位置）而不会篡改库#s; s源代码

使用代码段

$scope.myJson = {

    globals: {
        fontFamily: "MuseoSans-700"
    },
    type: 'pie',
    backgroundColor: "transparent",
    plot: {
        detach: false,
        "slice": 55,
        "shadow": 0,
        refAngle: -90,
        valueBox: {
            fontColor: "black",
            fontSize: 16,
            connector: {
                lineWidth: 1,
                height: "50px"

            },
            rules: [
              {
                  rule: "%v > 30",
                  placement: "in",
                  offsetR: 1

              },
              {
                  rule: "%v <= 30",
                  placement: "out"
              }
            ]
        }
    },
series: [
      { "values": [32], "text": "A", backgroundColor: "#c4f0ac" },
      { "values": [32], "text": "B", backgroundColor: "#FF9097" },
      { "values": [1], "text": "C", backgroundColor: "#FF9097" },
      { "values": [1], "text": "D", backgroundColor: "#FF9097" },
      { "values": [1], "text": "NS", backgroundColor: "#bcbcbc" }
        ]

结果图表就像这样

使用canvas.js在圆环图中的dataPointLevel处指定IndexLabelPlacement

1 个答案: