【问题标题】:Why is my Line Chart not displaying (Chart.JS)?为什么我的折线图不显示(Chart.JS)?
【发布时间】:2016-09-20 22:32:39
【问题描述】:

我正在显示一个饼图和一个条形图,但我的折线图,具有相同类型的代码,不显示,我想知道为什么。这是我的代码:

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
. . .
<canvas id="forecastLineChart"></canvas>

JQUERY

    var lineChartData = {
            labels: [
                "APPLES, GALA WAXF 138", "APPLES, GOLDEN DELICIOUS WAX
100", "APPLES, GOLDEN DELICIOUS WAXF 113"
            ],
            datasets: [
                {
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [49, 46, 153.86]
                },
                {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,0.8)",
                    highlightFill: "rgba(151,187,205,0.75)",
                    highlightStroke: "rgba(151,187,205,1)",
                    data: [52, 40, 65.00]
                },
                {
                    fillColor: "rgba(120,240,180,0.5)",
                    strokeColor: "rgba(120,240,180,0.8)",
                    highlightFill: "rgba(120,240,180,0.75)",
                    highlightStroke: "rgba(120,240,180,1)",
                    data: [42, 42, 227.70]
                }
            ]
        }
        var ctxLineChart = $("#forecastLineChart").get(0).getContext("2d");
        var forecastImpactLineChart = new    Chart(ctxLineChart).Line(lineChartData);

【问题讨论】:

    标签: jquery html chart.js linechart chart.js2


    【解决方案1】:

    定义图表的语法在版本 2 中有所改变。Fiddle

    var forecastImpactLineChart = Chart.Line(ctxLineChart, {
        data: lineChartData
    });
    

    var forecastImpactLineChart = new Chart(ctx, {
        type: 'line',
        data: lineChartData,
        options: options
    });
    

    【讨论】:

      【解决方案2】:

      代码中的错字(缺少新的“w”):

       var forecastImpactLineChart = new Chart(ctxLineChart).Line(lineChartData);
      

      【讨论】:

      • 只在帖子中,不在实际代码中;我会修改帖子以更好地反映现实。
      猜你喜欢
      • 1970-01-01
      • 2015-04-08
      • 2017-08-10
      • 1970-01-01
      • 2020-11-17
      • 1970-01-01
      • 1970-01-01
      • 2021-09-19
      • 1970-01-01
      相关资源
      最近更新 更多