Canvas JS Chart中呈现的数据
Canvas JS Chart中呈现的数据
提问于 2018-06-01 16:36:43
我正在使用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%，并覆盖整个图表。那么，它是依赖于类型编号，还是我在这里遗漏了什么？任何建议或建议都将非常感谢-谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 06:12:35
数据点中的数据是: admin，26.67；user，6.67;operator,13.33和vendor，6,67。所以admin %是26.67/53.33 * 100 = 50%。所以饼图是完全正确的。这取决于您要在图表中显示的内容。管理员出现8次超过16次，它必须用半个馅饼表示。由于计算次数/30*100的不同，标签值也不同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50639305
复制相关文章
相似问题