2015-01-08 1 views
1

를 시작했지만 몇 가지 이유로 스크립트는d3pie.Js 원형 차트 오류가 나는 d3pie 스크립트와 함께 작동하도록 노력하고

를 실행 dosent이 내 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. 

을 얻을 당신은 아래로 조금 d3js.js에 대한 참조를 이동해야 도움

+0

나는 당신의 첫 번째 줄에 당신에게 plnkr 나중에 : –

+0

시도 "#pieChart"을 줄 것이다 – user1614080

답변

1

의 진가를 알아볼 것입니다.

<!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