Chart.js ligne graphique ne s'affiche pas

Je me suis construit un graphique en ligne avec chart.js. Cependant, le graphique ne s'affiche pas. Voici mon code HTML

    <canvas id="myChart" width"600" height:"600"></canvas>

Voici mon code javascript. Je n'ai pas les erreurs de cette approche, mais rien ne s'affiche. 

var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);


var data = {
labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
datasets: [
    {
        label: "Sodium intake",
        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: [165, 159, 180, 181, 156, 155, 140]
    },
    {
        label: "Sugar intake",
        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: [128, 148, 140, 119, 186, 127, 190]
    }
]

};

L'autre approche que j'ai utilisée était semblable à la documentation. J'ai instancié un nouveau graphique. Cependant, cette approche renvoie undefined pour ma ligne Graphique.

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).line(data,{
belzierCurve : false

});

InformationsquelleAutor Winnemucca | 2015-02-08
  1. 8

    Sur votre code html:

    <canvas id="myChart" width"600" height:"600"></canvas>

    Il devrait être:

    <canvas id="myChart" width="600" height="600"></canvas>

    Ensuite, Remplacez votre code

    var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);

    Avec ce code

    var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

    Dans votre js

    var data = {
    //your data here
}
enter code here

    puis ajoutez cette ligne après vos données

    var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

    De sorte que votre code devrait ressembler à ceci:

    var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
  datasets: [
      {
          label: "Sodium intake",
          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: [165, 159, 180, 181, 156, 155, 140]
      },
      {
          label: "Sugar intake",
          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: [128, 148, 140, 119, 186, 127, 190]
      }
  ]
}

var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);
    InformationsquelleAutor Nb12se
  2. 2

    Ok, essayez ceci :

    pour commencer corriger votre code html : 

    <canvas id="myChart" width="600" height="600"></canvas>

    ensuite, essayez ceci pour votre javascript :

    var data = {
    "labels": ["January", "February", "March", "April", "May", "June", "July", "August", "November", "December"],
    "datasets": [{
        label: "Sodium intake",
        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: [165, 159, 180, 181, 156, 155, 140]
    }, {
        label: "Sugar intake",
        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: [128, 148, 140, 119, 186, 127, 190]
    }]
}

var chartDisplay = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);

    Et qui devrait le faire ok. Voir un jsfiddle de.

    InformationsquelleAutor rtome
  3. 0

    La raison peut être que vous utilisez la dernière chart.min.js mais l'aide de l'ancien code. Pour la référence correcte, suivre les chartjs.org de la documentation.

    Le code de configuration de la structure a changé dans la dernière version. (Je suppose à partir de 2.3)

    Ainsi, au lieu de 

    var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries).Pie(pieData,pieOptions);

    Nous sommes structuration comme:

    var countries= document.getElementById("countries").getContext("2d");
var chart = new Chart(countries,{
  type: 'pie',
  data: 
  {
    labels: ['India', 'Germany', 'Netherland'],
    datasets: 
        [{
        backgroundColor: '#337ab7',
        data: ['100', '99' ,'98'],
        borderWidth:1,
        }]
  },
  options:
  {
      responsive: true,
      maintainAspectRatio:false,
      legend: {
        display: false,
        position: 'top'
      }
  }
});

    ou

    var countries= document.getElementById("countries").getContext("2d");
var pieData = 
{
    labels: ['India', 'Germany', 'Netherland'],
    datasets: [{
      backgroundColor: '#337ab7',
      data: ['100', '99' ,'98'],
      borderWidth:1,
      }]
};
var pieOptions = 
{
    responsive: true,
    maintainAspectRatio:false,
    legend: {
      display: false,
      position: 'top'
    }
};

var chart = new Chart(countries,{    
type: 'pie',
data: pieData,
options: pieOptions
});
    InformationsquelleAutor Pikesh Prasoon