Charts ChartJS图表不显示大面积空白

Charts ChartJS图表不显示大面积空白,charts,Charts,我正在尝试在DirectAdmin插件中显示ChartJS图表。独立的图表工作正常,但一旦我把它放入DirectAdmin插件文件,它就失败了。图表会显示一小秒,然后当它完成加载(即所有线条都已渲染)时,它会消失,留下大量空白。看这里 我看到一些帖子/答案似乎表明这可能是一个配置问题。如果有人能帮忙,我将不胜感激 编辑 以下是我的代码配置,它们都在DirectAdmin之外工作: ChartJS var canvas = document.getElementById('canvas')

我正在尝试在DirectAdmin插件中显示ChartJS图表。独立的图表工作正常,但一旦我把它放入DirectAdmin插件文件,它就失败了。图表会显示一小秒,然后当它完成加载(即所有线条都已渲染)时,它会消失,留下大量空白。看这里

我看到一些帖子/答案似乎表明这可能是一个配置问题。如果有人能帮忙,我将不胜感激

编辑

以下是我的代码配置,它们都在DirectAdmin之外工作:

ChartJS

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var myChart = new Chart(ctx, {
       type: 'line',
       data: {
          labels: ["2010", "2011", "2012", "2013"],
          datasets: [{
             label: 'Dataset 1',
             data: [150, 200, 250, 150],
             borderColor: "#0083b4",
             backgroundColor:"rgba(0, 131, 180, 0.1)"
          }, {
             label: 'Dataset 2',
             data: [250, 100, 150, 10],
             borderColor: "#0083b4",
             ackgroundColor:"rgba(0, 131, 180, 0.1)"
          }]
       }, 
       options: {
            
       }
    });
    var chart = new Chartist.Line('.ct-chart', {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        series: [
            [1, 5, 2, 5, 4, 3],
            [2, 3, 4, 8, 1, 2]
        ]
    }, {
        low: 1,
        showArea: true,
        showPoint: false,
        fullWidth: true
    });

    chart.on('draw', function(data) {
        if(data.type === 'line' || data.type === 'area') {
            data.element.animate({
                d: {
                    begin: 0,
                    dur: 2500,
                    from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                    to: data.path.clone().stringify(),
                    easing: Chartist.Svg.Easing.easeOutQuint
                }
            });
        }
        
    });
ChartistJS

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var myChart = new Chart(ctx, {
       type: 'line',
       data: {
          labels: ["2010", "2011", "2012", "2013"],
          datasets: [{
             label: 'Dataset 1',
             data: [150, 200, 250, 150],
             borderColor: "#0083b4",
             backgroundColor:"rgba(0, 131, 180, 0.1)"
          }, {
             label: 'Dataset 2',
             data: [250, 100, 150, 10],
             borderColor: "#0083b4",
             ackgroundColor:"rgba(0, 131, 180, 0.1)"
          }]
       }, 
       options: {
            
       }
    });
    var chart = new Chartist.Line('.ct-chart', {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        series: [
            [1, 5, 2, 5, 4, 3],
            [2, 3, 4, 8, 1, 2]
        ]
    }, {
        low: 1,
        showArea: true,
        showPoint: false,
        fullWidth: true
    });

    chart.on('draw', function(data) {
        if(data.type === 'line' || data.type === 'area') {
            data.element.animate({
                d: {
                    begin: 0,
                    dur: 2500,
                    from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                    to: data.path.clone().stringify(),
                    easing: Chartist.Svg.Easing.easeOutQuint
                }
            });
        }
        
    });
因此我尝试了ChartistJs(注意“ist”),它使用SVG,但仍然不起作用。这一定是DirectAdmin考虑的主题。谢谢你的建议。