Question

我想根据下图显示圆环图中的多个信息

任何人请告诉我该怎么做。这是工作示例：https://jsfiddle.net/qpem8fzv/1/

我希望显示100％的总数据和部分中的其他数据。有关详细信息，请参阅附图。

var doughnutData = [{
    value: 100,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
  },
  {
    value: 25,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  },
  {
    value: 50,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
  }

];

var ctx1 = $("#d1").get(0).getContext("2d");
var myChart1 = new Chart(ctx1).Doughnut(doughnutData, {
  percentageInnerCutout: 90
});

#w {
  position: relative;
  height: 200px;
  width: 200px;
}

#d1 {
  position: absolute;
}

#d1 {
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="w">
  <canvas id="d1" height="200" width="200"></canvas>
</div>

Answer 1

该图表将使用所有细分的总价值为100％。因此，实现您想要的最简单方法是从细分中排除您的100％价值，并包含一个作为剩余部分的细分，最高可达100％。

所以...在您的示例中，从doughnutData中移除第一个细分，并在结尾添加一个，如下所示：

    var doughnutData = [
        {
            value: 25,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
        },
        {
            value: 50,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
        },
        {
            value:25,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red",
        },
    ];

添加的段的值为100 - （第一段的值：25） - （第二段的值：50）= 25.然后，您只需为100％段添加另一个标签。

编辑：上面的jsfiddle：https://jsfiddle.net/vcdruo2f/2/

虽然这确实意味着“总计”段的悬停工具提示不正确，但它在逻辑上是正确的，以显示100％，这是您在饼图/圆环图中所需的。

另请参阅：http://www.chartjs.org/docs/latest/configuration/tooltip.html

在圆环图中显示多个数据信息

1 个答案: