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

Posted 2023-04-13

【中文标题】即使 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

【发布时间】：2018-07-06 14:17:38

【问题描述】：

我正在使用 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\"]"

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

$(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
                    
                
            );
        );

【问题讨论】：

您的 HTML 中是否有 <div id="tripMonthsChart"></div>？

或者尝试使用不带 \ 的 JSON 并在开头和结尾使用 ' 而不是 "。类似'["label":"August-2017","value":"35470", ...

@roland 我有那个 div，其中 svg 被追加但图表没有出现。 JSON.parse 工作正常。还是让我在这里尝试删除\。

@roland 尝试删除 \" with ' 仍然图表仍未出现，但控制台中出现 not valid: label: "August-2017", value: "35470", color: "#FF0000" 消息。

【参考方案1】：

知道这一点很奇怪，但它通过将 JSON 的 value 字段解析为 Number 来解决

"[\"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 的 value 字段必须不带 ' 或 " 才能显示图形。