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

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% 的值(value)，并包括一个分割作为剩余部分，直到 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