Question

我的应用程序现在有两个图表，它们都使用chartjs。一个是条形图，完美运作。第二个，根本没有渲染，我不知道为什么。我在一个虚拟的html页面中创建了第二个并复制了代码，但当我把它放在我的实际应用程序中时，它会中断。

我有这个HTML：

<div class="card text-white">
    <div class="card-header">
        <div class="row">
            <h3 class="display-4" id="graphTitle"></h3>
        </div>
    </div>
    <div class="card-body">
         <canvas id="myLineChart"></canvas>
    </div>
    <div class="card-footer text-center">
          <div class="btn-group" role="group">
               <button class="btn btn-success" name="graphBTN" id="1DBTN">1D</button>
               <button class="btn btn-success" name="graphBTN" id="1mBTN">1M</button>
               <button class="btn btn-success" name="graphBTN" id="3mBTN">3M</button>
               <button class="btn btn-success" name="graphBTN" id="6mBTN">6M</button>
               <button class="btn btn-success" name="graphBTN" id="ytdBTN">YTD</button>
               <button class="btn btn-success" name="graphBTN" id="1YBTN">1Y</button>
               <button class="btn btn-success" name="graphBTN" id="2YBTN">2Y</button>
               <button class="btn btn-success" name="graphBTN" id="5YBTN">5Y</button>
         </div>
       </div>
   </div>

至于javascript，

我有以下全局变量。

// graphing global variables
    var ctx;
    var myBarChart;
    var myLineChart;

我有一个生成折线图的功能（这是静态测试数据）：

function createLineChart() {

        // Our labels along the x-axis
        var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
        // For drawing the lines
        var africa = [86,114,106,106,107,111,133,221,783,2478];
        var asia = [282,350,411,502,635,809,947,1402,3700,5267];
        var europe = [168,170,178,190,203,276,408,547,675,734];
        var latinAmerica = [40,20,10,16,24,38,74,167,508,784];
        var northAmerica = [6,3,2,2,7,26,82,172,312,433];

        ctx = $('#myLineChart');
        myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: years,
            datasets: [
                { 
                    data: africa
                }
            ]
        }
        });
}

然后，在按钮单击中，我调用了大约8个函数，其中一个是这个函数。

createLineChart();

所有功能都可以按下按钮（参见图片），但是图表。我没有错。所有控制台日志都显示正常。它不像我的其他（条形图）图形那样显示 - 它们使用的是动态数据集。

Chartjs折线图无法渲染

0 个答案: