Création d'un Radar Chart

**6116d** · 26/04/2017, 16h19

Bonjour,

J'essaye d'ajouter un radar Chart sur mon site mais malheureusement je n'y arrive pas...

J'ai pris le code de cet exemple: https://www.highcharts.com/demo/polar-spider
Celui-ci fonctionne bien sous JSFiddle mais pas sur mon site, j'ai cette erreur "Cannot read property 'getContext' of null" indiquant qu'il ne reconnait pas le canvas.getContext('2d')...

Voici mes fichiers:
index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
	<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
	<script src="spiderChart.js"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=9">
</head>
<body>
 
<div class="container">
  <br />
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
<!--       Chart.js Canvas Tag -->
      <canvas id="radarChart"></canvas>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>
 
</body>
</html>

spiderChat.js

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// Companion code to this question: 
//http://stackoverflow.com/questions/40142059/how-do-you-create-a-radar-chart-using-chart-js-with-a-y-axis-of-0-to-100/40144372#40144372
 
 
var canvas = document.getElementById("radarChart");
var ctx = canvas.getContext('2d');
 
// Global Options:
// Chart.defaults.global.defaultFontColor = 'black';
// Chart.defaults.global.defaultFontSize = 16;
 
var options = {
          responsive: true,
          maintainAspectRadio: true,
          legend: {
            position: 'top',
            },
          title: {
              display: true,
              text: 'Radar Chart'
              },
          scale: {
               reverse: false,
              ticks: {
                  max:100,
                  min: 0,
                  beginAtZero: false,
                  },
              pointLabels: {
                  callback: function (pointLabel) {
                      if (pointLabel.length > 10)
                      return pointLabel.substring(0, 10) + '...';
                      else
                      return pointLabel
                      }
                  }
 
           },
           scaleOverride: true,
           scaleSteps: 5,
           scaleStepWidth: 20,
           scaleStartValue: 100,
           };
 
var radarChartData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};
 
var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: radarChartData,
    options: options
});

Merci de votre aide

**SpaceFrog** · 26/04/2017, 16h40

Peut être un début de réponse avec le type :
http://api.highcharts.com/highcharts/chart.type

un exemple de mise en œuvre http://stackoverflow.com/questions/1...s-on-each-axis

**danielhagnoul** · 26/04/2017, 23h11

Dans votre cote vous incluez un script "chart" alors que dans l'exemple il y en a trois.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Création d'un Radar Chart

JavaScript

Discussions similaires

Partager

Partager