El gráfico.js complemento de anotaciones no se comporta como se esperaba en mi plantilla de wordpress. El gráfico se muestra bien, pero las anotaciones simplemente no aparecen. Intenté poner la configuración de anotaciones en «complementos» y también justo debajo de las opciones sin éxito. Finalmente, intenté copiar y pegar el ejemplo de codepen directamente en mi propio código y obtuve el mismo resultado: sin anotaciones. Ahora estoy totalmente confundido :p
yo he duplicado este ejemplo de lápiz de código exactamente (creo) en mi servidor de prueba pero, aunque la anotación (una línea) aparece en el lápiz de código, no aparece en mi sitio. Creo (?) que tengo las mismas versiones de todo instalado y he puesto en cola el complemento de anotaciones para enumerar chart.js como una dependencia. Por favor, hágame saber lo que estoy haciendo mal!
Desde mi archivo de complemento (fws_wpt_pdf.php):
wp_enqueue_script( 'chart_js', "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js", array('jquery'), false, true );
wp_enqueue_script( 'chart_annotation_js', 'https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js', array('chart_js'), false, true );
De mi archivo javascript (fws_pdf.js):
var canvas = $(selector)[0];
var ctx = canvas.getContext('2d');
var data = {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(0,191,255,0.5)",
strokeColor: "rgba(0,191,255,0.8)",
highlightFill: "rgba(100,149,237,0.75)",
highlightStroke: "rgba(100,149,237,1)",
data: [60, 50, 40, 30, 20, 10, 20],
borderColor: 'grey',
borderWidth: 1,
}
]};
var options = {
legend: {
display: true,
},
tooltips: {
enabled: false,
},
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero:true
},
}],
yAxes: [{
display: true,
ticks: {
beginAtZero:true
},
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'black',
borderWidth: 3
}],
drawTime: "afterDraw" // (default)
}
};
// Chart declaration:
var multiLineChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
Desde mi archivo de plantilla (entry-content-wpt-test-get-results.php):
<div class="chart-wrapper">
<canvas id="test_chart" data-label="<?php echo $result->getTitle() ?>" data-x_value="<?php echo $scales[1]->getValue(); ?>" data-y_value="<?php echo $scales[0]->getValue(); ?>" data-x_max_value="<?php echo $scales[1]->getMaximum(); ?>" data-y_max_value="<?php echo $scales[0]->getMaximum(); ?>"></canvas>
</div>
Esto es probablemente sólo un error tonto de mi parte. ¡Gracias de antemano por tu ayuda!
.