Discussion :

[rexbul62]

Bonjour,

Je souhaite intégrer dans une page html un graphique C3.
L'axe x des abscisses est l'axe du temps.
Par défaut, les dates/heures qui sont affichées sur cet axe sont choisies par C3.
Je préférerai que s'affichent des heures significatives (06h00 - 12h00 - 18h00 - 22h00 par exemple).
Pour cela, j'utilise le paramètre "values" dans "axis", mais alors le graphe est complétement faux.
Comment faire apparaitre les valeurs voulues sur l'axe des abscisses ?
Vous, trouverez tout ça ici : https://jsfiddle.net/rexbul/akhop5my...rjs=RmeKjrlAj7

Merci beaucoup pour votre aide.
Cordialement.

Le code JS :

Code :

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
var date= ['x', ' 2023-01-22#00:00:01', ' 2023-01-22#00:10:03', ' 2023-01-22#00:20:05', ' 2023-01-22#00:30:07', ' 2023-01-22#00:40:09', ' 2023-01-22#00:50:13', ' 2023-01-22#01:00:15', ' 2023-01-22#01:10:17', ' 2023-01-22#01:20:19', ' 2023-01-22#01:30:21', ' 2023-01-22#01:40:22', ' 2023-01-22#01:50:25', ' 2023-01-22#02:00:27', ' 2023-01-22#02:10:29', ' 2023-01-22#02:20:33', ' 2023-01-22#02:30:35', ' 2023-01-22#02:40:37', ' 2023-01-22#02:50:39', ' 2023-01-22#03:00:41', ' 2023-01-22#03:10:43', ' 2023-01-22#03:20:45', ' 2023-01-22#03:30:46', ' 2023-01-22#03:40:51', ' 2023-01-22#03:50:53', ' 2023-01-22#04:00:00', ' 2023-01-22#04:10:57', ' 2023-01-22#04:20:59', ' 2023-01-22#04:31:01', ' 2023-01-22#04:41:03', ' 2023-01-22#04:51:07', ' 2023-01-22#05:01:09', ' 2023-01-22#05:11:11', ' 2023-01-22#05:21:13', ' 2023-01-22#05:31:15', ' 2023-01-22#05:41:17', ' 2023-01-22#05:51:19', ' 2023-01-22#06:00:00', ' 2023-01-22#06:10:13', ' 2023-01-22#06:20:15', ' 2023-01-22#06:30:17', ' 2023-01-22#06:40:19', ' 2023-01-22#06:50:21', ' 2023-01-22#07:00:00', ' 2023-01-22#07:10:25'];
var conso=['Conso', 1600, 1572, 1459, 1313.6, 1245.2, 3385.6, 1191, 501.6, 527.4, 511, 503.6, 505.2, 489.2, 465.4, 458.6, 443, 467, 468.2, 472, 505.2, 512.4, 501, 508.8, 947, 3584.2, 2623, 1707.6, 1366, 2042.2, 586.8, 597.2, 579.4, 612.4, 699.2, 542.6, 446.2, 477.04545454545456, 468.6, 453.2, 580.4, 2374.6, 1024, 980.8, 1079.8];
var cat_colors=['LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue'];
var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        xFormat: ' %Y-%m-%d#%H:%M:%S',
        columns: [
            date,
            conso
        ],
        axes: {
            Conso: 'y'
        },
        types: {
            Conso: 'bar' // ADD
        },
        color: function (color, d) {
            return cat_colors[d.index];
        }
    },
    axis: {
        x: {
            label: 'Dates',
            type: 'timeseries',
            tick:  {  
            values: [' 2023-01-22#03:00:00', ' 2023-01-22#06:00:00']  ,
            format : '%H:%M'
            }
        },
      y: {
            label: 'Consommation'
        }
      },
    title: {
            text: "titre"
    }
});

[mathieu]

en effet, c'est bizarre que le réglage de l'axe change l'affichage des barres.
vous pouvez remettre une largeur de barre lisible avec "bar.width" :
https://c3js.org/reference.html#bar-width

[rexbul62]

Bonsoir Mathieu,

Merci beaucoup, j'ai inséré ceci : bar: {width:10}, et ça fonctionne.
Bonne soirée à vous et merci encore.