pie chart 적용문제 하얗게 아무것도 안뜹니다.
본문
http://goeul.co.kr/theme/goeul/sub/sales.php <----- 링크 페이지 3월매출적용 부분입니다.
페이지에 pie chart.js 적용을 시켰는데 적용이 안되는이유가.. 스크립트 위치 문제인거 같은데요.
coolChart.js 위치 문제 인것같은데.. 위치를 어디에 넣어야될지 모르겠어요 ㅜ.ㅜ
coolChart.js 위치 문제가 아니면 뭐가 문제일까요 ?
하얗게 아무것도 안보입니다. 3월 현재매출에 적용했어요. 아무것도 안뜹니다.. 도와주세요. !! ㅜ.ㅜ
아래 처럼 만들어진 js 입니다.
답변 1
<div id="chartHolder" style="height:380px; width:100%;"></div>
이부분을
<canvas id="chartHolder" style="height:380px; width:100%;"></canvas>
로 변경
이거추가
<script>
new Chart(document.getElementById("chartHolder"), {
type: 'pie',
data: {
labels: [" 1본부 300평", "2본부 200평", "3본부 500평"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"], /* "#e8c3b9","#c45850" */
data: [300,200,500] /* 734,784 */
}]
},
options: {
title: {
display: true,
text: ''
}
}
})
</script>
Phillips님 감사합니다. 평수차트를 2번사용하는건가요? 파이차트가 적용됩니다...
도넛매출차트 적용 오류 부탁드릴게요 ㅜ.ㅜ
script type 이름을 바꿔야되나요 ? donut ?
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<script src="https://www.koolchart.com/demo/LicenseKey/KoolChartLicense.js"></script>
<script src="https://www.koolchart.com/demo/KoolChart/JS/KoolChart.js"></script>
<link rel="stylesheet" href="https://www.koolchart.com/demo/KoolChart/Assets/Css/KoolChart.css"/>
</head>
<body>
<div id="chartHolder" style="width:100%; height:500px;"></div>
<script>
var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";
KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");
function chartReadyHandler(id) {
document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setData(chartData);
}
var layoutStr =
'<KoolChart backgroundColor="#FFFFFF" borderStyle="none">'
+'<NumberFormatter id="numfmt" useThousandsSeparator="true"/>'
+'<Column3DChart>'
+'<horizontalAxis>'
+'<CategoryAxis id="hAxis" categoryField="Month" ticksBetweenLabels="false" title="MONTH" displayName="Month"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis" formatter="{numfmt}" interval="500" baseAtZero="true" maximum="3500" title="Dollars"/>'
+'</verticalAxis>'
+'<series>'
+'<Column3DSeries yField="Profit" fill="#5587a2">'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Column3DSeries>'
+'</series>'
+'<horizontalAxisRenderers>'
+'<Axis3DRenderer axis="{hAxis}" tickLength="10" minorTickLength="0" tickPlacement="outside" minorTickPlacement="cross" placement="bottom" canDropLabels="true" showLabels="true" showLine="true" labelAlign="center" axisTitleStyleName="title">'
+'<axisStroke>'
+'<Stroke weight="10" color="#f4f4f4"/>'
+'</axisStroke>'
+'<tickStroke>'
+'<Stroke weight="1" color="#d2d2d2" alpha="1"/>'
+'</tickStroke>'
+'<minorTickStroke>'
+'<Stroke weight="1" color="#ffffff" alpha="1" caps="square"/>'
+'</minorTickStroke>'
+'</Axis3DRenderer>'
+'</horizontalAxisRenderers>'
+'<verticalAxisRenderers>'
+'<Axis3DRenderer axis="{vAxis}" visible="true" tickLength="10" minorTickLength="0" tickPlacement="outside" minorTickPlacement="cross" placement="left" canDropLabels="false" showLabels="true" labelAlign="center" axisTitleStyleName="title">'
+'<axisStroke>'
+'<Stroke weight="10" color="#f4f4f4"/>'
+'</axisStroke>'
+'<tickStroke>'
+'<Stroke weight="1" color="#d2d2d2" alpha="1"/>'
+'</tickStroke>'
+'<minorTickStroke>'
+'<Stroke weight="1" color="#ffffff" alpha="1" caps="square"/>'
+'</minorTickStroke>'
+'</Axis3DRenderer>'
+'</verticalAxisRenderers>'
+'</Column3DChart>'
+'<Style>'
+'.title{color:0x4691E1; fontSize:12; fontWeight:bold; fontStyle:italic;}'
+'</Style>'
+'</KoolChart>';
var chartData =
[{"Month":"Jan","Profit":900},
{"Month":"Feb","Profit":1400},
{"Month":"Mar","Profit":1500},
{"Month":"Apr","Profit":1900},
{"Month":"May","Profit":1400},
{"Month":"Jun","Profit":2000},
{"Month":"Jul","Profit":1800},
{"Month":"Aug","Profit":2500},
{"Month":"Sep","Profit":3000},
{"Month":"Oct","Profit":2000},
{"Month":"Nov","Profit":2100},
{"Month":"Dec","Profit":1700}];
</script>
</body>
</html>
참고하세요