8
JavaScript를 Chartist.js 라이브러리 (JavaScript)로 그래픽 형식으로 값을 표시하기 위해 그래프를 만들었습니다. Y 축의 모든 값은 데이터베이스에서옵니다. 하지만 Y 축을 그룹화 된 수천 형식으로 표시 할 수는 없습니다. 내가 사용하는 경우로 number_format - 나는chartist.js를 사용하여 그래프에서 Y 축에 그룹화 된 수천을 숫자로 배열하십시오.
PHP 코드
$clientData = $wpdb->get_results('SELECT * FROM clientsdata WHERE Client_Id = "'.$currentUser->ID.'"');
$months=array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$selectedFieldData = array();
foreach($months as $month){
$value = '';
foreach($clientData as $client){
if($client->Month == $month && $client->Year == $selectYear){
$value = $client->$fieldValue;
break;
}
}
if(!empty($value)){
$selectedFieldData[] = $value; //See below - 1
}
else{
$selectedFieldData[] = null;
}
}
자바 스크립트 코드 (그래프 실제 코드)
$data = "<script type='text/javascript'>
var chart = new Chartist.Line('#chart1',{
labels: ['January', 'February', 'March','April' ,'May' ,'June' ,'July' ,'August' ,'September' ,'October' ,'November' ,'December'],
series: [
[$selectedFieldData[0],$selectedFieldData[1],$selectedFieldData[2],$selectedFieldData[3],$selectedFieldData[4],$selectedFieldData[5],
$selectedFieldData[6],$selectedFieldData[7],$selectedFieldData[8],$selectedFieldData[9],$selectedFieldData[10],$selectedFieldData[11]],
]
},
{
fullWidth: true,
plugins: [
Chartist.plugins.tooltip({
pointClass: 'my-cool-point'
})
]
//low: 0
},
{
axisY: {
labelInterpolationFnc: function(value){
return value;
}}
}
);
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 80,
durations = 500;
// Once the chart is fully created we reset the sequence
chart.on('created', function() {
seq = 0;
});
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
seq++;
if(data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 1000,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if(data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Chartist.Svg.Easing
easing: 'easeOutQuart'
}
});
} else if(data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
}
);
var circle = new Chartist.Svg('circle', {
cx: [data.x],
cy: [data.y],
r: [5],
'ct:value': data.value.y,
'ct:meta': data.meta,
class: 'my-cool-point',
}, 'ct-area');
// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
data.element.replace(circle);
} else if(data.type === 'grid') {
// Using data.axis we get x or y which we can use to construct our animation definition objects
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'],
easing: 'easeOutQuart'
};
var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'],
easing: 'easeOutQuart'
};
var animations = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
};
data.element.animate(animations);
}
});
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
chart.on('created', function() {
if(window.__exampleAnimateTimeout) {
clearTimeout(window.__exampleAnimateTimeout);
window.__exampleAnimateTimeout = null;
}
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 1200000);
});
</script>";
echo $data;
1 (이미지 확인)도 교차점의 툴팁에 천 개 형식으로 값을 표시 할 여기에서 천 형식으로 값을 변환하지만 배열은 별도의 위치에서 값을 취하므로 실제 값이 나옵니다.
사람이 문제를 해결하기 위해 시도 할 수 있습니까?
PHP 코드
견적 시리즈가 도움이 축. [ ' ". $ selectedFieldData [0].",' ". $ selectedFieldData [1]." '] – Kashyap
모든 값은 동적입니다. 그러면 숫자 형식을 사용한 후 값이 두 위치에있게됩니다. 전의. number_format, array [0] - 10, array [1] - 000 다음에 값이 10000이라고 가정합니다. 그러나 숫자가 감소하거나 증가하지 않으면 what. 당신이 확실하다면 정확한 답을 써서 게시하십시오. –