不显示时间序列折线图

Question

我想显示像这里https://www.chartjs.org/samples/latest/scales/time/financial.html的图表

我编写了以下代码来显示图表，但是当我运行代码时，会发生以下错误：

Chart.min.js？ver = 1.0.0：7未捕获错误：未实现此方法：无法找到适配器或提供了不完整的集成。 at ri.oi（Chart.min.js？ver = 1.0.0：7）at i.update（Chart.min.js？ver = 1.0.0：7）at Chart.min.js？ver = 1.0.0 ：在at.updateLayout（Chart.min.js）的Object.update（Chart.min.js？ver = 1.0.0：7）的Object.each（Chart.min.js？ver = 1.0.0：7）处有7个。 ？ver = 1.0.0：7）ni.update（Chart.min.js？ver = 1.0.0：7）at ni.construct（Chart.min.js？ver = 1.0.0：7）at new ni （chart.min.js？ver = 1.0.0：7）在initializeCustomerFlowChart（reports.js？ver = 1.0.0：83）

/**
 * JS Code for the admin-panel/contact/reports.
 * 
 * It handles initializtion of the customer flow chart.
 */

'use strict';

jQuery(document).ready(function() {

	console.log('admin-panel/contact/reports');

	// Initialize the custome flow chart.
	initializeCustomerFlowChart();

});

function initializeCustomerFlowChart() {

	var dataSet = [];	
	for(var i = 0 ; i < 20; i++) {		
		var date = new Date();
		date = date.setDate( date.getDate() + i);
		dataSet.push({ t: date, y: i.toString() });
	}	

	var data = {
		datasets: [
			{
				label: 'Customer Flow',
				backgroundColor: 'rgba(255,0,0, 0.5)',
				borderColor: 'rgb(255,0,0)',
				data: dataSet,
				type: 'line',
				pointRadius : 0,
				fill: false,
				lineTension: 0,
				broderWidth: 2				
			}
		]
	};

	var options = {
		scales: {
			xAxes: [{
				type: 'time',
				distribution: 'series',
				ticks: {
					source: 'data',
					autoSkip: true
				}
			}],
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'No. Of Customer'
				}
			}]
		},
		tooltips: {
			intersect: false,
			mode: 'index',
			callbacks: {
				label: function(tooltipItem, myData) {
					var label = myData.datasets[tooltipItem.datasetIndex].label || '';
					if (label) {
						label += ': ';
					}
					label += parseFloat(tooltipItem.value).toFixed(2);
					return label;
				}
			}
		}
	};

	var config = {
		type: 'bar',
		data: data, 
		options: options
	};	

	var context = document.getElementById('contact-reports-customer-flow-chart').getContext('2d');
	var chart = new Chart(context, config);

}

<canvas id="contact-reports-customer-flow-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Answer 1

您使用的是过时的图表库或未包含正确的图表库，我不确定您在实际代码中使用了什么。下面的代码对我有用。只需添加ChartJs包文件即可加载所有依赖项。

/**
 * JS Code for the admin-panel/contact/reports.
 * 
 * It handles initializtion of the customer flow chart.
 */

'use strict';

jQuery(document).ready(function() {

    console.log('admin-panel/contact/reports');

    // Initialize the custome flow chart.
    initializeCustomerFlowChart();

});

function initializeCustomerFlowChart() {

    var dataSet = [];   
    for(var i = 0 ; i < 20; i++) {      
        var date = new Date();
        date = date.setDate( date.getDate() + i);
        dataSet.push({ t: date, y: i.toString() });
    }   

    var data = {
        datasets: [
            {
                label: 'Customer Flow',
                backgroundColor: 'rgba(255,0,0, 0.5)',
                borderColor: 'rgb(255,0,0)',
                data: dataSet,
                type: 'line',
                pointRadius : 0,
                fill: false,
                lineTension: 0,
                broderWidth: 2              
            }
        ]
    };

    var options = {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series',
                ticks: {
                    source: 'data',
                    autoSkip: true
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'No. Of Customer'
                }
            }]
        },
        tooltips: {
            intersect: false,
            mode: 'index',
            callbacks: {
                label: function(tooltipItem, myData) {
                    var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) {
                        label += ': ';
                    }
                    label += parseFloat(tooltipItem.value).toFixed(2);
                    return label;
                }
            }
        }
    };

    var config = {
        type: 'bar',
        data: data, 
        options: options
    };  

    var context = document.getElementById('contact-reports-customer-flow-chart').getContext('2d');
    var chart = new Chart(context, config);

}

<canvas id="contact-reports-customer-flow-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

希望这能解决问题。