Canvas JS Chart 中的渲染数据

Question

我正在使用 CanvasJs 渲染图表，它现在工作正常。虽然我不确定，但它是否以适当的方式在图表中显示数据。这是我使用的逻辑：

var query = from c in GetProducts()
            group c by c.Type into g
            select new
            {
                Type = g.Key,
                Count = g.Count()
            };

double val = 0;
string valNo = "";

List<DataPoint> dataPoints = new List<DataPoint>();

foreach (var item in query)
{
   val = ((Convert.ToDouble(item.Count) / 30) * 100); //The logic - Tracks user login for 30 days. For the time being, days are fixed to 30 days
   valNo = val.ToString("#.##");

   DataPoint aDataPoint = new DataPoint();

   aDataPoint.y = valNo;
   aDataPoint.legendText = item.Type;
   aDataPoint.label = item.Type;

   dataPoints.Add(aDataPoint);

   ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
}

控制器和型号：

public List<UserType> GetProducts()
{
   List<UserType> aLst = new List<UserType>()
   {
       new UserType() { UserId = 1001, Type = "Admin" },
       new UserType() { UserId = 1002, Type = "User" },
       new UserType() { UserId = 1003, Type = "Admin" },
       new UserType() { UserId = 1004, Type = "User" },
       new UserType() { UserId = 1005, Type = "Admin" },
       new UserType() { UserId = 1006, Type = "Operator" },
       new UserType() { UserId = 1007, Type = "Operator" },
       new UserType() { UserId = 1008, Type = "Admin" },
       new UserType() { UserId = 1009, Type = "Operator" },
       new UserType() { UserId = 1010, Type = "Admin" },
       new UserType() { UserId = 1011, Type = "Operator" },
       new UserType() { UserId = 1012, Type = "Vendor" },
       new UserType() { UserId = 1013, Type = "Vendor" },
       new UserType() { UserId = 1014, Type = "Admin" },
       new UserType() { UserId = 1015, Type = "Admin" },
       new UserType() { UserId = 1016, Type = "Admin" }
    };

    return aLst;
}

public class DataPoint
{
    public string y { get; set; }
    public string legendText { get; set; }
    public string label { get; set; }
}

观点：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer"></div>

<script type="text/javascript">
                debugger;
                window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer", {
                        title: {
                            text: "Frequently Visited User Types (Sample)"
                        },
                        animationEnabled: true,
                        legend: {
                    verticalAlign: "center",
                            horizontalAlign: "left",
                            fontSize: 20,
                            fontFamily: "Helvetica"
                        },
                        theme: "theme2",
                                        data: [
                {
                    type: "pie",
                    indexLabelFontFamily: "Garamond",
                    indexLabelFontSize: 20,
                    indexLabel: "{label} {y}%",
                    startAngle: -20,
                    showInLegend: true,
                    toolTipContent: "{legendText} {y}%",
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                } ]
                    });
            chart.render();
        };
</script>

现在我得到的示例图片：

我有点担心上面显示的图表，我的意思是呈现的数据和计算。虽然我的逻辑有效，但在图表中，管理员占据了图表的 26.67%，而且似乎又占据了 50%。那么图表中的数据是否完美呈现？让我困惑的是这里 - Canvas JS Chart。它在最后将所有类型值计算为 100%，并覆盖了整个图表。那么它取决于类型编号还是我在这里遗漏了什么？任何意见或建议将不胜感激 - 谢谢。

Answer 1

您在数据点中的数据是：admin, 26.67 ;用户，6.67；运营商，13.33 和供应商，6,67。所以管理百分比是 26.67/53.33 * 100 = 50%。所以饼图是完全正确的。这取决于您要在图表中显示的内容。 admin 在 16 中出现了 8 次，必须用半个馅饼来表示。由于您的计算 count/30*100，标签值不同。

Canvas JS Chart 中的渲染数据

Rendered Data in Canvas JS Chart

javascript

asp.net

asp.net-mvc

canvasjs