Плагин аннотаций Chart.js - аннотация не появляется в шаблоне Wordpress - PullRequest
Новая
       11

Плагин аннотаций Chart.js - аннотация не появляется в шаблоне Wordpress

0 голосов
/ 07 ноября 2019

Плагин chart.js annotations работает не так, как ожидалось в моем шаблоне WordPress. Диаграмма отображается хорошо, но аннотации просто не отображаются. Я попытался поместить конфигурацию аннотаций в «плагины», а также прямо под опциями, но безрезультатно. Наконец, я попытался скопировать пример codepen прямо в мой собственный код и получил тот же результат - без комментариев. Теперь я полностью сбит с толку: p

Я дублировал этот пример кодового пера точно (я думаю) на моем промежуточном сервере, но, хотя аннотация (строка) появляется в кодовом пере,это не появляется на моем сайте. Я думаю (?) У меня установлены одинаковые версии всего, и я поставил плагин аннотаций в список chart.js в качестве зависимости. Пожалуйста, дайте мне знать, что я делаю неправильно!

Из моего файла плагина (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 );

Из моего файла 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
});

Из моего файла шаблона (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>

и, наконец, URL страницы на моем промежуточном сайте . Это, наверное, просто глупая ошибка с моей стороны. Заранее спасибо за помощь!

...