Sformatuj liczbę z pogrupowanymi tysiącami na osi Y na wykresie za pomocą chartist.js

Question

Utworzono wykres do wyświetlania wartości w formie graficznej przez bibliotekę Chartist.js w języku JavaScript (PHP). Wszystkie wartości osi Y pochodzą z bazy danych. Ale nie mogę wyświetlić osi Y w zgrupowanym formacie tysięcy. Chcę, aby wyświetlić tysięcy wartość formatu nawet na podpowiedzi punktu przecięcia (zobacz zdjęcie)

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

kodu JavaScript (wykres rzeczywisty kod)

$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 - Jeśli używam Number_format tutaj, to konwertuje wartość w tysiącu formatu, ale tablica przyjmuje wartość w oddzielnej pozycji, więc wartość rzeczywista się zrywa.

ktoś może próbować rozwiązać ten problem?

Answer 1

Wreszcie jeden z moich przyjaciół naprawił ten problem.

1. Naprawiono za pomocą Jquery'ego - liczba z pogrupowanymi tysiącami na osi Y na wykresie. Liczba z tysiącami zgrupowanych na tooltipu ustalona przez "waluta:" "".

Oto pełny kod. kod 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; 
     } 
} 

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