canvasjs차트 색상과 유동적인 데이터 표현방법

canvasjs차트 색상과 유동적인 데이터 표현방법 채택완료

수난이대 4년 전 조회 2,413

1. 색상이 너무 칙칙한데 항목별 색상을 주는방법이 있나요?

- color rgb(숫자~숫자~) 이런형태로 제공되는부분을 본거같은데

표현방법( 색상표없이 어떻게 ) 하는지요.

$dataPoints = array(
array("y" => 40, "label" => '월' ),
array("y" => 12, "label" => '화' ),
array("y" => 11, "label" => '수' ),
array("y" => 4, "label" => '목'),
array("y" => 120, "label" => '금' ),
array("y" => 76, "label" => '토' ),
array("y" => 61, "label" => '일' )

);

위 형태로 샘플이 되있는데, 데이터가 갯수가 정해져있는게 아니고

유동적으로 표현해야합니다.

예를들자면 게시물의 갯수라든지.. 위 형태를 loop 로 돌려야하는건지요?

3. 상용으로 사용해도 무방한지요?

</p>

<p><?</p>

<p>$dataPoints = array(

array("y" => 40, "label" => '월' ),

 array("y" => 12, "label" => '화' ),

 array("y" => 11, "label" => '수' ),

 array("y" => 4, "label" => '목'),

 array("y" => 120, "label" => '금' ),

 array("y" => 76, "label" => '토' ),

 array("y" => 61, "label" => '일' )</p>

<p>);

?></p>

<p><script>

window.onload = function() {

 

var chart = new CanvasJS.Chart("chartContainer", {

 animationEnabled: true,

 theme: "light2",

 title:{

  text: "제목"

 },

 axisY: {

  title: ""

 },

 data: [{

  type: "column",

  yValueFormatString: "#,##0.## 건",

  dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>

 }]

});

chart.render();

 </p>

<p>

 

var chart2 = new CanvasJS.Chart("chartContainer2", {

 animationEnabled: true,

 theme: "light2",

 title:{

  text: "제목"

 },

 axisY: {

  title: ""

 },

 data: [{

  type: "pie", //pie

  yValueFormatString: "#,##0.## 건",

  dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>

 }]

});

chart2.render();

 

}

</script></p>

<p><div id="chartContainer" style="height: 370px; width: 600px;"></div>

<div id="chartContainer2" style="height: 370px; width: 600px;"></div></p>

<p><script src="<a href="<a href="https://canvasjs.com/assets/script/canvasjs.min.js"></script" target="_blank" rel="noopener noreferrer">https://canvasjs.com/assets/script/canvasjs.min.js"></script</a>"><a href="https://canvasjs.com/assets/script/canvasjs.min.js"></script" target="_blank" rel="noopener noreferrer">https://canvasjs.com/assets/script/canvasjs.min.js"></script</a></a>></p>

<p>

canvasjs차트 색상과 유동적인 데이터 표현방법 채택완료

공유하기