即使 Web 浏览器控制台中没有错误，d3 js 饼图也不会显示。 SVG 正在追加

Question

我正在使用 C# 通过 MVC 4 设计模式对后端进行编程。我创建了一个控制器，它将存储在 viewdata 中的数据与控制器绑定。这是我在控制器 viewdata["monthTrip"] 中存储的 JSON。

"[{\"label\":\"August-2017\",\"value\":\"35470\",\"color\":\"#582D92\"},{\"label\":\"December-2017\",\"value\":\"33598\",\"color\":\"#582D92\"},{\"label\":\"January-2018\",\"value\":\"22203\",\"color\":\"#582D92\"},{\"label\":\"July-2017\",\"value\":\"24633\",\"color\":\"#582D92\"},{\"label\":\"November-2017\",\"value\":\"41667\",\"color\":\"#582D92\"},{\"label\":\"October-2017\",\"value\":\"35546\",\"color\":\"#582D92\"},{\"label\":\"September-2017\",\"value\":\"31224\",\"color\":\"#582D92\"}]"

这里是 javascript 代码作为 cshtml 的一部分

$(document).ready(function(){
            var pie = new d3pie("tripMonthsChart", {
                "size": {
                    "canvasHeight": 270,
                    "canvasWidth": 320,
                    "pieInnerRadius": "45%",
                    "pieOuterRadius": "65%"
                },
                "data": {
                    "sortOrder": "value-desc",
                    "content": JSON.parse(@Html.Raw(Json.Encode(ViewBag.monthTrip)))
                },
                "labels": {
                    "inner": {
                        "format": "value"
                    },
                    "mainLabel": {
                        "fontSize": 16
                    },
                    "percentage": {
                        "color": "#ffffff",
                        "decimalPlaces": 0
                    },
                    "value": {
                        "color": "#000000",
                        "fontSize": 18
                    },
                    "lines": {
                        "enabled": true,
                        "style": "straight"
                    },
                    "truncation": {
                        "enabled": true
                    }
                },
                "tooltips": {
                    "enabled": true,
                    "type": "placeholder",
                    "string": "{label}: {value} ({percentage}%)",
                    "styles": {
                        "fontSize": 18
                    }
                },
                "effects": {
                    "pullOutSegmentOnClick": {
                        "speed": 400,
                        "size": 8
                    }
                }
            });
        });

Answer 1

很奇怪，但通过将 JSON 的值字段解析为数字

解决了这个问题

"[{\"label\":\"August-2017\",\"value\":\"35470\"},{\"label\":\"December-2017\",\"value\":\"33598\"},{\"label\":\"January-2018\",\"value\":\"22203\"},{\"label\":\"July-2017\",\"value\":\"24633\"},{\"label\":\"November-2017\",\"value\":\"41667\"},{\"label\":\"October-2017\",\"value\":\"35546\"},{\"label\":\"September-2017\",\"value\":\"31224\"}]"

需要编辑成

[{"label":"August-2017","value":35470,"color":"#582D92"},{"label":"December-2017","value":33598,{\"label\":\"January-2018\","value":22203,{\"label\":\"July-2017\","value":24633,{\"label\":\"November-2017\","value":41667,{\"label\":\"October-2017\","value":35546},{\"label\":\"September-2017\","value":31224}]"

json 的值字段必须没有 ' 或 " 才能显示图表。

即使 Web 浏览器控制台中没有错误，d3 js 饼图也不会显示。 SVG 正在追加

d3 js pie chart is not showing even there is not error in web browser console. and SVG is getting append

c#

jquery

razor

d3.js

asp.net-mvc-4