Comment formater le diagramme DHTMLX et lier la valeur au camembert?

Question

J'essaie de formater un graphique à barres horizontal empilé DHTMLX simple; Puis liez la valeur à l'une des tranches de secteur dans un graphique à secteurs associé, en plus de la lier à une zone de texte MVC dans un formulaire de modification. Problème 1: le graphique à barres horizontales a 3 étiquettes affichées: 0, 50, 100. Pas ce que je voulais, mais c'est ok, ce qui n'est pas correct, c'est le format. Le 0 est réglé de façon à ce qu'il soit à mi-chemin sur le graphique à barres, le 50 est centré et OK, le 100 est également à mi-chemin sur l'extrémité droite du graphique. Chaque paramètre que je peux trouver, pendant des jours, j'ai modifié et rien ne change cela.

Où il devrait être: 0 [... données de graphique .. 50 ... données de graphique ..] 100 son apparaissant comme données ([) .... données ... 50 .... .. 10]) avec la gauche 0 au centre de la bordure du graphique, la même chose pour le 100 sur la bordure droite.

La variable MVC est @ Model.PercentData1 et tout ce que son ensemble doit refléter dans le graphique à barres et la tranche respective dans le graphique à secteurs. Chaque section aura un diagramme à secteurs et chaque @ Model.PercentData2, 3, 4 ... fonctionnera sur sa propre tranche de tarte. J'ai eu la valeur de barchart liée ou liée à une zone de texte html et l'a fait travailler avec @ Html.TextBoxFor (model => model.PercentData1) alors que EditorFor ne ferait rien.

Le but initial est de trouver d'où viennent les 0, 50 et 100 et pourquoi ils sont définis où ils sont. Ils devraient être espacés de la carte elle-même et le 100 devrait être "100%"

Le code avec le camembert et le diagramme à barres, certaines parties sont commentées, il y aura 10 camemberts, un par groupe, qui fonctionne sur une tranche de tarte unique et différente

var pieChart = new dhtmlXChart({ 
        view: "pie3D", 
        container: "chart_container", 
        value: "#sales#", 
        // gradient:true, 
        color: "#color#", 
        cant:0.6, 
        //gradient: function (gradient) { 
        // gradient.addColorStop(0.0, "#FF0000"); 
        // gradient.addColorStop(0.8, "#FFFF00"); 
        // gradient.addColorStop(1.0, "#00FF22"); 
        //}, 
        label:"#year#", 
        //legend: { 
        // width: 45, 
        // align: "right", 
        // valign: "top", 
        // marker: { 
        //  type: "square", 
        //  width: 12 
        // }, 
        // template: "#year#" 
        //} 

       }) 


       var data = [ 
    { sales: "4.3", year: "Group 1", color: "#80ff7a" }, 
    { sales: "9.9", year: "Group 2", color: "#bdff33" }, 
    { sales: "7.4", year: "Group 3", color: "#ff9e2a" }, 
    { sales: "9.0", year: "Group 4", color: "#ff561b" }, 
    { sales: "7.3", year: "Group 5", color: "#ff71be" }, 
    { sales: "6.8", year: "Group 6", color: "#ffea69" }, 
    { sales: "7.4", year: "Group 7", color: "#ff9e2a" }, 
    { sales: "9.0", year: "Group 8", color: "#ff561b" }, 
    { sales: "7.3", year: "Group 9", color: "#ff71be" }, 
    { sales: "6.8", year: "Group 10", color: "#ffea69" } 
       ]; 
       pieChart.parse(data, "json"); 



       amtUsed = 25; 
       myBarChart = new dhtmlXChart({ 
        view: "stackedBarH", 
        container: "chartDiv", 
        value: "#spent#", 
        color: "#1b66da", 
        width: 50, 
        border:false, 
        alpha: 0.7, 

        //legend: { 
        // width: 25, 
        // align: "right", 
        // valign: top, 
        // marker: { 
        //  type: "round", 
        //  width: 15 
        // }, 
        // values: [ 
        // { text: "company A", color: "#3399ff" }, 
        // { text: "company B", color: "#66cc00", markerType: "item" } 
        // ] 
        //}, 

        xAxis: { 
         start: 0, 

         end: 120 
        }, 
        //padding: { 
        // left: 30, 
        // right:30 
        //}, 
        yAxis: { 
         template: " " 
        } 
       }); 
       myBarChart.addSeries({ 
        value: function (obj) { 
         return 100 - obj.spent; 
        }, 
        color: "#eaeaea", 
        label: "", 
        tooltip:{template:" "} 
       }); 
       my_data = [{ spent: amtUsed }]; 
       myBarChart.parse(my_data, "json"); 

Answer 1

xLa configuration d'Axe doit contenir les propriétés "start", "end" et "step". Dans l'autre cas, l'échelle sera calculée.

Et si vous voulez changer la position de « 0 » et étiquettes « 120 », vous pouvez appliquer un style CSS dans la méthode « modèle »:

xAxis:{ 
    start:0, 
    step:20, 
    end:120, 
    template:function(value){ 
     if(value==0) 
      value = "<div style='margin-left:5px'>"+value+"</div>"; 
     else if(value==120) 
      value = "<div style='margin-right:15px'>"+value+"</div>"; 
     return value; 
    } 
}