javascript - Formatee un número con miles agrupados en el eje Y en gráfico usando chartist.js

php graph

Question

He creado un gráfico para mostrar el valor en forma gráfica mediante la biblioteca Chartist.js en JavaScript (PHP). Todos los valores de Y-Axis provienen de la base de datos. Pero no puedo mostrar el eje Y en formato de miles agrupados. Quiero mostrar mil valores de formato incluso en la información sobre herramientas del punto de intersección (Verificar imagen)

Código 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;
}
}

Código de JavaScript (código de código real)

$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 - Si uso number_format aquí, entonces se convierte el valor en formato de mil, pero el conjunto toma el valor en una posición separada, por lo que el valor real se rompe.

¿Alguien puede tratar de resolver este problema?

Answer 1

Finalmente, uno de mis amigos ha solucionado este problema.

1. Corregido por Jquery: número con miles agrupados en eje Y en gráfico. Número con miles agrupados en la información sobre herramientas fijada por "currency: ''''".

Aquí está el código completo. Código 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;
}
else{
$selectedFieldData[] = null;
}
}

Código JavaScript

$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'',
currency :'' '' //Used for display grouped thousand format value on toolip
})
]
//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);
});
//Below code is for display grouped thousand format value on Y-AXIS
</script><script>
function commaSeparateNumberr(val){
while (/(/d+)(/d{3})/.test(val.toString())){
val = val.toString().replace(/(/d+)(/d{3})/, ''$1''+'',''+''$2'');
}
return val;
}
setTimeout(function(){ jQuery(''.ct-vertical'').each(function(){
var ab =jQuery(this).html();
jQuery(this).html(commaSeparateNumberr(ab));
}); }, 2000);
</script>";
echo $data;