0

我使用图表 js 库添加甜甜圈字符并使用 ajax 调用填充数据。Doughtnut 渲染正确，但没有图例。根据文档http://www.chartjs.org/docs/latest/charts/doughnut.html如果出现标签，数据显示在图例和工具提示中，但我只有一个工具提示。这是我的js代码。

var pieChartCanvas = $('#pieChartPaid').get(0).getContext("2d");
                        var pieChart = new Chart(pieChartCanvas);
                        var PieData;

                        $.ajax({
                            type: "GET",
                            cache: false,
                            contentType: "application/json; charset=utf-8",
                            url: '@Url.Action("GetPaidInvoice", "Home")',
                            dataType: "json",
                            success: function (data) {
                                PieData = data;
                                var pieOptions = {
                                    //Boolean - Whether we should show a stroke on each segment
                                    segmentShowStroke: true,
                                    //String - The colour of each segment stroke
                                    segmentStrokeColor: "#fff",
                                    //Number - The width of each segment stroke
                                    segmentStrokeWidth: 2,
                                    //Number - The percentage of the chart that we cut out of the middle
                                    percentageInnerCutout: 50, // This is 0 for Pie charts
                                    //Number - Amount of animation steps
                                    animationSteps: 100,
                                    //String - Animation easing effect
                                    animationEasing: "easeOutBounce",
                                    //Boolean - Whether we animate the rotation of the Doughnut
                                    animateRotate: true,
                                    //Boolean - Whether we animate scaling the Doughnut from the centre
                                    animateScale: false,
                                    //Boolean - whether to make the chart responsive to window resizing
                                    responsive: true,
                                    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                                    maintainAspectRatio: true,
                                    //String - A legend template
                                    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
                                };                            
                                //Create pie or douhnut chart
                                pieChart.Doughnut(PieData, pieOptions);

以及通过的json：

    data=[
 {value:300,
color: "#00a65a",
highlight:"#00a65a",
label:"On time"
},
{value:200,
color:"#f39c12" ,
highlight:"#f39c12"
label:"Overdue"
},
...
]

标签仅在工具提示上可见，但不会生成图例。

4

0 回答 0