Discussion :

[souhail72]

Bonjour @ vous
j'i cherché un solution mais impossible
j'ai un fichier json fait de cette maniére

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
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
76
77
78
79
80
81
{
    "Liste": [
        {
            "Name": "Ligne A",
            "Qte": 150,
            "ListeData": 
            [
              { "OF":"A001",
                "Data":200,
                "Color":"Red"
              },
 
              { "OF":"A002",
                "Data":400,
                "Color":"Blue"
              },
 
              { "OF":"A003",
                "Data":800,
                "Color":"Blue"
              }
            ]
        },
        {
            "Name": "Ligne B",
            "Qte": 0,
           "ListeData": 
            [
              { "OF":"",
                "Data":210,
                "Color":""
              }
            ]
        },
        {
            "Name": "Ligne C",
            "Qte": 123,                    
            "ListeData": 
            [
              { "OF":"C001",
                "Data":226,
                "Color":"Red"
              },
              { "OF":"C002",
                "Data":420,
                "Color":"Red"
              },
              { "OF":"C003",
                "Data":411,
                "Color":"Blue"
              },
              { "OF":"C004",
                "Data":656,
                "Color":"Red"
              },
              { "OF":"C005",
                "Data":687,
                "Color":"Red"
              }
            ]
        },
        {
            "Name": "Ligne D",
            "Qte": 100,            
            "ListeData": 
            [
              { "OF":"D001",
                "Data":50,
                "Color":"Blue"
              }
            ]
        },
        {
            "Date1": "01/01/2017",
            "Date2": "02/02/2017",
            "Date3": "03/13/2017",
            "Date4": "04/04/2017"
        }
 
    ]
}

et je souhaite afficher un chart bar scatter mais sous condition de la couleur que j'ai dans mon json donc
condition 1 si Color = 'red' alors la couleurs seras red
sinon elle seras rouge
la condition seras faite au niveau du redrerer
chart

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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
{
        xtype: 'cartesian',
        renderTo: document.body,
        width: '100%', //550,//
        height: 380,
        flipXY: true, 
        animate: true,
        shadow: true,
        store: ListeBarProgresseStore,
        //legend: {dock: 'right'},
        axes: [
            {// axe des x
                type: 'numeric',
                position: 'bottom',
                title: {text: 'Production(Nbr de machine)',fontSize: 12},
                //fields: ['Liste_Data1.Data','Liste_Data2.Data','Liste_Data3.Data','Liste_Data4.Data','Liste_Data5.Data','Qte']
                fields: ['Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8','Data9','Qte']
            },
            { // axe des y
                type: 'category',
                position: 'left',
                fields: 'Name',
                label : {'text-anchor': 'left',x:0,fontSize: 15,color: '#063951',fontFamily: 'Arial'}
            }],
        series: [
            { // bar horizentale
                type: 'bar',                       
                axis: 'bottom',
                column: true,
                stacked: true,
                gutter: 80,
                highlight: {
                    stroke:'#0B59A2',
                    opacity: 0.8,
                    lineWidth: 1
                },
                colors: ['#9CC5C9','#D5544F','#a61187','#5288DB'],
                xField: 'Name',
                //yField: ['Liste_Data1.Data','Liste_Data2.Data','Liste_Data3.Data','Liste_Data4.Data','Liste_Data5.Data'],
                yField: ['Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8','Data9','Color1','Color2','Color3','Color4','Color5','Color6','Color7','Color8','Color9'], // ,'Color1','Color2','Color3','Color4','Color5','Color6','Color7','Color8','Color9'
                seriesThemes: [{
                    fill: "#115fa6"
                    }, {
                    fill: "#94ae0a"
                    }, {
                    fill: "#a61120"
                    }, {
                    fill: "#ff8809"
                    }, {
                    fill: "#ffd13e"
                    }, {
                    fill: "#a61187"
                    }, {
                    fill: "#24ad9a"
                    }, {
                    fill: "#7c7474"
                    }, {
                    fill: "#a66111"
                    }],
                    markerThemes: [{
                    fill: "#115fa6",
                    type: 'circle'
                    }, {
                    fill: "#94ae0a",
                    type: 'cross'
                    }, {
                    fill: "#a61120",
                    type: 'plus'
                }],
                label: {
                    fields: ['Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8','Data9'],
                    //fields: ['Liste_Data1.Data','Liste_Data2.Data','Liste_Data3.Data','Liste_Data4.Data','Liste_Data5.Data'],
                    display: 'insideStart',orientation :'vertical',color: '#FFFFFF',fontFamily: 'Arial',fontSize: 15
                },
                       renderer: function(sprite, record, attr, index, store) {
      //console.log(store.Color[index].color);
            return Ext.apply(attr, {
                fill: store.Color[index].color
            });
        }
            },
            {
                type: 'scatter',
                highlight: {
                    size: 12,
                    radius: 12,
                    fill: '#96D4C6',
                    stroke: '#30BDA7'
                },
                fill: true,
                xField: 'Name',
                yField: ['Qte'],
                marker: {
                    type: 'image',
                    src:'resources/img/ligneG1.png',
                    fill: '#30BDA7',
                    radius: 10,
                    lineWidth: 0,
                    width:15,
                    scalingX:4
                },
                axis: 'bottom',
                stacked:true,
                //label: {field: 'Qte',display: 'rotate',color: '#A61120',fontFamily: 'Arial',fontSize: 15}
            }
 
        ]
},

malheureusement elle affiche les couleurs de base prédéfinit par les theme de sencha
merci pour votre aide et passez un bon dimanche