Как встроить Chart.js и Chart.min.js в HTML - PullRequest
Новая
       33

Как встроить Chart.js и Chart.min.js в HTML

0 голосов
/ 01 июня 2019

У меня есть страница отчета на моем общем сервере, отчеты находятся в cahart.js и chart.min.js , которые отлично работали на локальном хосте ,но мой хостинг-провайдер не поддерживает js и не позволяет мне устанавливать nodeJS на общем сервере, можете ли вы дать мне представление о том, как встроить эти js-файлы в HTML.

Мои файлы диаграмм создаются с использованием Chart.js(chart.js и chart.min.js)

/ *!* Chart.js * http://chartjs.org/ * Версия: 1.0.2 

<?php foreach ($results as $k => $v): ?>
                <tr>
                  <td><?php echo $k; ?></td>
                  <td><?php 

                    echo $company_currency .' ' . $v;
                    //echo $v;

                  ?></td>
                </tr>
              <?php endforeach ?>

            </tbody>
            <tbody>
              <tr>
                <th>Total Amount</th>
                <th>
                  <?php echo $company_currency . ' ' . array_sum($results); ?>
                  <?php //echo array_sum($results); ?>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- col-md-12 -->
  </div>
  <!-- /.row -->


</section>
<!-- /.content -->


$(document).ready(function() {
  $("#ReportMainNav").addClass('active');
  $("#productReportSubMenu").addClass('active');

}); 

var report_data = <?php echo '[' . implode(',', $results) . ']'; ?>;




CHART JS
$(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */
     var areaChartData = {
      labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label               : 'Electronics',
          fillColor           : 'rgba(210, 214, 222, 1)',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : report_data
        }
      ]
    }

    //-------------
    //- BAR CHART -
    //-------------
    var barChartCanvas                   = $('#barChart').get(0).getContext('2d')
    var barChart                         = new Chart(barChartCanvas)
    var barChartData                     = areaChartData
    barChartData.datasets[0].fillColor   = '#00a65a';
    barChartData.datasets[0].strokeColor = '#00a65a';
    barChartData.datasets[0].pointColor  = '#00a65a';
    var barChartOptions                  = {
      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
      scaleBeginAtZero        : true,
      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines      : true,
      //String - Colour of the grid lines
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      //Number - Width of the grid lines
      scaleGridLineWidth      : 1,
      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines  : true,
      //Boolean - If there is a stroke on each bar
      barShowStroke           : true,
      //Number - Pixel width of the bar stroke
      barStrokeWidth          : 2,
      //Number - Spacing between each of the X value sets
      barValueSpacing         : 5,
      //Number - Spacing between data sets within X values
      barDatasetSpacing       : 1,
      //String - A legend template
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      //Boolean - whether to make the chart responsive
      responsive              : true,
      maintainAspectRatio     : true
    }

    barChartOptions.datasetFill = false
    barChart.Bar(barChartData, barChartOptions)   })   </script>

Ошибка в консоли браузера 

Failed to load resource: the server responded with a status of 404 ()
jquery.min.js:2 jQuery.Deferred exception: Chart is not defined ReferenceError: Chart is not defined
    at HTMLDocument.<anonymous> 
    at j 
    at k  undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught ReferenceError: Chart is not defined
    at HTMLDocument.<anonymous> (storewise:497)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

1 Ответ

0 голосов
/ 01 июня 2019

Если вы собираетесь выполнить Chart.js во внешнем интерфейсе, вы можете просто использовать CDN для предоставления библиотеки.

https://www.jsdelivr.com/package/npm/chart.js

...