Question

想要使用chart.js，但无法得到一个简单的例子。

备份代码：

<canvas id="canvas" width="500px" height="200"></canvas>

$(function(){
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]
};
});

但这不起作用，有什么帮助吗？根据小提琴，根本没有图表显示。

Answer 1

您必须实际调用其中一种图表类型。您已声明并初始化了该数据集对象，但您没有将其传递给任何内容！

假设这应该是折线图，你需要调用

myNewChart.Line(data);

您需要使用<canvas> ID修复问题。 Fixed fiddle.

Answer 2

<title>ChartJS - Few Chart Examples Using Chart engine Libs</title>

    <script src="jquery-2.1.4.min.js"></script>
    <script src="Chart.js"></script>
</head>
<body>
<p>Line<br/>Pie<br/>Radar_Chart <br/> using chartJS libs <br/> <bl/> To display uncomment the drawing line in Index.html</p>
    <canvas id="mycanvas" width="256" height="356">     </canvas>
    <canvas id="mycanvas2" width="956" height="356">   </canvas>                
    <script>
        $(document).ready(function(){
            var ctx = $("#mycanvas").get(0).getContext("2d");           
        var ctx = document.getElementById("mycanvas2").getContext("2d");    
        var myLineChart = new Chart(ctx);                                                               
        var datas = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],

            datasets: [
            {
            //gray with red circle 
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "red",
        pointHighlightFill: "red",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data:  [16,25,13,12,45,16,56,16,75]
            },
            {
            //blue progress/line 
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [6,5,43,2,45,6,76,76,45]
            }
            ]
        };  

var myLineChart = new Chart(ctx).Line(datas);

无法使Chart.js正常工作

2 个答案: