Chart.js注释插件-注释未出现在Wordpress模板中
chart.jsannotations插件在我的wordpress模板中运行不正常。图表呈现良好,但注释不显示。我试着将注释配置放在“插件”中,也放在选项下,但没有效果。最后,我尝试将codepen示例复制粘贴到自己的代码中,得到了相同的结果——没有注释。现在我完全糊涂了:p 我已经(我想)在我的暂存服务器上完全复制了,但是,虽然注释(一行)出现在代码笔中,但它没有出现在我的站点上。我想(?)我已经安装了所有东西的相同版本,并且我已经将annotations插件排队,将chart.js列为依赖项。请让我知道我做错了什么 从我的插件文件(fws_wpt_pdf.php)中: 从我的javascript文件(fws_pdf.js)中: 从我的模板文件(entry content wpt test get results.php):Chart.js注释插件-注释未出现在Wordpress模板中,wordpress,chart.js2,Wordpress,Chart.js2,chart.jsannotations插件在我的wordpress模板中运行不正常。图表呈现良好,但注释不显示。我试着将注释配置放在“插件”中,也放在选项下,但没有效果。最后,我尝试将codepen示例复制粘贴到自己的代码中,得到了相同的结果——没有注释。现在我完全糊涂了:p 我已经(我想)在我的暂存服务器上完全复制了,但是,虽然注释(一行)出现在代码笔中,但它没有出现在我的站点上。我想(?)我已经安装了所有东西的相同版本,并且我已经将annotations插件排队,将chart.js列为依赖项
我找到了答案!我正在为旧的Wordpress主题开发模板,它强制使用jQuery1.8(!)。当我阻止它这样做并加载最新的jQuery(3.4.1)时,注释又开始工作了
现在我必须使用jQuery migrate(grrrrrr)跟踪主题中所有不推荐的内容
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 );
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
});
<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>