2015-01-08 13 views
1

我試圖用d3pie腳本的工作,但由於某種原因,腳本dosent運行d3pie.Js餅圖錯誤拿到腳本啓動

這是我的HTML

<html> 
<head> 
    <script type="text/javascript" src="./d3/d3.min.js"></script> 
    <script type="text/javascript" src="./d3pie.min.js"></script> 
    <script type="text/javascript" src="./d3js.js"></script> 
</head> 
<body> 
    <div id="pieChart"></div> 
</body> 

和這是我寫的用於獲取餅圖d3js.js的js

var pie = new d3pie("pieChart", { 
"header": { 
    "title": { 
     "text": "PROYECTOS", 
     "fontSize": 28, 
     "font": "verdana" 
    }, 
    "subtitle": { 
     "text": "", 
     "color": "#ccc", 
     "fontSize": 18, 
     "font": "verdana" 
    }, 
    "titleSubtitlePadding": 7 
}, 
"footer": { 
    "text": "Fuente: yo", 
    "color": "#ccc", 
    "fontSize": 11, 
    "font": "courier", 
    "location": "bottom-center" 
}, 
"size": { 
    "canvasWidth": 682, 
    "pieInnerRadius": "50%", 
    "pieOuterRadius": "72%" 
}, 
"data": { 
    "content": [ 
     { 
      "label": "Programación", 
      "value": 6, 
      "color": "#82ccfb" 
     }, 
     { 
      "label": "Blogging", 
      "value": 2, 
      "color": "#0e4a5a" 
     }, 
     { 
      "label": "Ilustración/Arte", 
      "value": 6, 
      "color": "#395197" 
     }, 
     { 
      "label": "Diseño Gráfico", 
      "value": 5, 
      "color": "#457cda" 
     }, 
     { 
      "label": "Rotulación", 
      "value": 2, 
      "color": "#b0dae1" 
     }, 
     { 
      "label": "Agricultura", 
      "value": 1, 
      "color": "#062831" 
     }, 
     { 
      "label": "Diseño Web", 
      "value": 8, 
      "color": "#2c8bb1" 
     } 
    ] 
}, 
"labels": { 
    "outer": { 
     "pieDistance": 28 
    }, 
    "inner": { 
     "format": "none" 
    }, 
    "mainLabel": { 
     "font": "verdana", 
     "fontSize": 17 
    }, 
    "percentage": { 
     "color": "#e1e1e1", 
     "font": "verdana", 
     "decimalPlaces": 0 
    }, 
    "value": { 
     "color": "#e1e1e1", 
     "font": "verdana" 
    }, 
    "lines": { 
     "enabled": true, 
     "style": "straight" 
    } 
}, 
"effects": { 
    "pullOutSegmentOnClick": { 
     "effect": "linear", 
     "speed": 400, 
     "size": 8 
    } 
}, 
"misc": { 
    "pieCenterOffset": { 
     "y": -15 
    } 
}, 
"callbacks": {}}); 

但是當我運行在瀏覽器的代碼,我得到

d3pie error: the first d3pie() param must be a valid DOM element (not jQuery) or a ID string. 

我是新來這一點,並感謝所有幫助

+0

我給你plnkr後:) –

+0

試試 「#pieChart」 在第一線 – user1614080

回答

1

你應該將提及d3js.js一點點下降。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="d3.min.js"></script> 
    <script type="text/javascript" src="d3pie.js"></script> 
</head> 
<body> 
    <div id="pieChart"></div> 
    //you should include the d3js.js here 
    <script type="text/javascript" src="d3js.js"></script> 
</body> 

excuteable plnkr