Question

我决定使用

Chart.js

从数据构建图表

这是我需要显示它的模态

<div id="graphModal" class="modal modal-custom fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-header">
        <button id="modalClose" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title"></h4>
    </div>
    <div id="graphContainer" class="modal-body">
        <canvas id="speedLimitsChart"></canvas>
    </div>
    <div class="modal-footer">

    </div>
</div>

在视图标题中我包含了像这样的脚本

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="~/Scripts/DataTables-1.10.2/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<link href="~/Content/Styles/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/Datepicker-Languages/datepicker-languages.js"></script>
<script src="~/Scripts/jQuery-ui-extensions/weekMonthDatepicker.js?v=1.0.0.0"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/Chart.min.js"></script>
<script src="~/Scripts/Reports/SpeedLimitReport.js"></script>

我也有js文件，我打开模态我的按钮点击。

这是代码

$('#showGraph').on('click', function () {

     $('#graphModal').modal('show');
     ShowChart();
});

这是功能

function ShowChart () {
var popCanvas = $("#speedLimitsChart");
var barChart = new Chart(popCanvas, {
    type: 'ShowChart()bar',
    data: {
        labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
        datasets: [{
            label: 'Population',
            data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)'
            ]
        }]
    }
});

}

在控制台中我有这个错误

ncaught Error: "ShowChart()bar" is not a chart type.
at t.<anonymous> (Chart.min.js:10)
at Object.each (Chart.min.js:10)
at t.buildOrUpdateControllers (Chart.min.js:10)
at t.update (Chart.min.js:10)
at t.construct (Chart.min.js:10)
at new t (Chart.min.js:10)
at ShowChart (SpeedLimitReport.js:978)
at HTMLButtonElement.<anonymous> (SpeedLimitReport.js:276)
at HTMLButtonElement.dispatch (jquery-1.10.2.min.js:22)
at HTMLButtonElement.v.handle (jquery-1.10.2.min.js:22)

我的问题可能在哪里？

感谢帮助

Answer 1

你只有一个未成年人typo：

而不是：

type: 'ShowChart()bar'

应该是：

type: 'bar'

请务必查看文档：{{3}}

图表JS ShowChart（）栏＆＃34;不是图表类型错误

1 个答案: