Formatez un nombre avec des milliers groupés sur l'axe Y en utilisant chartist.js

Question

J'ai créé un graphique pour afficher la valeur sous forme graphique par la bibliothèque Chartist.js en JavaScript (PHP). Toutes les valeurs de Y-Axis proviennent de la base de données. Mais je ne suis pas en mesure d'afficher Y-Axis dans le format des milliers groupés. Je veux afficher mille valeur de format même sur infobulle de point d'intersection (Vérifier l'image)

Code 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; 
     } 
} 

code JavaScript (graphique code réel)

$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 je number_format ici, alors il convertit la valeur au format mille, mais le tableau prend la valeur en position séparée, donc la valeur réelle se brise.

Quelqu'un peut-il essayer de résoudre ce problème?

Answer 1

Enfin, un de mes amis a corrigé ce problème.

1. Fixé par Jquery - nombre avec des milliers groupés sur l'axe Y dans le graphique. Numéro avec groupe de milliers dans l'info-bulle corrigé par "currency: ''".

Voici le code complet. Code 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; 
     } 
} 

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