목록으로

pie chart 적용문제 하얗게 아무것도 안뜹니다.

더블샷a 3년 전 조회 3,425

답변 1

http://goeul.co.kr/theme/goeul/sub/sales.php <----- 링크 페이지 3월매출적용 부분입니다.

페이지에 pie chart.js 적용을 시켰는데 적용이 안되는이유가.. 스크립트 위치 문제인거 같은데요.

coolChart.js 위치 문제 인것같은데.. 위치를 어디에 넣어야될지 모르겠어요 ㅜ.ㅜ

coolChart.js 위치 문제가 아니면 뭐가 문제일까요 ?

하얗게 아무것도 안보입니다. 3월 현재매출에 적용했어요. 아무것도 안뜹니다.. 도와주세요. !! ㅜ.ㅜ

아래 처럼 만들어진 js 입니다.

#piechart #js위치적용문제 #도넛차트적용문제

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

핑크빈

3년 전

이부분을

로 변경

이거추가

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�

더블샷a

3년 전

Phillips님 감사합니다. 평수차트를 2번사용하는건가요? 파이차트가 적용됩니다...
도넛매출차트 적용 오류 부탁드릴게요 ㅜ.ㅜ

script type 이름을 바꿔야되나요 ? donut ?

Phillips

3년 전

<!DOCTYPE html>



<html lang="en">

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

참고하세요

KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");

function chartReadyHandler(id) {
  document.getElementById(id).setLayout(layoutStr);
  document.getElementById(id).setData(chartData);
}

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>

참고하세요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

pie chart 적용문제 하얗게 아무것도 안뜹니다.

답변 1개

답변에 대한 댓글 2개

공유하기