如何格式化DHTMLX圖表並將值綁定到餅圖？

我試圖格式化一個簡單的DHTMLX堆疊水平條形圖;然後將該值綁定到關聯餅圖中的一個Pie切片，並將其綁定到「編輯」窗體中的MVC文本框。如何格式化DHTMLX圖表並將值綁定到餅圖？

問題1：水平條形圖有3個標籤顯示爲：0,50,100。不是我想要的，但它確定，格式不正確。 0設置爲在條形圖的中間位置，50位居中並且正常，100位也在圖表的右端一半。我可以找到的每一個設置，幾天來，我已經修改，沒有什麼改變這一點。

它應該是：0 [...圖表數據.. 50 ...圖表數據..] 100 其顯示爲（[）.... data ... 50 ...數據。 .. 10]），左邊的0坐在圖表邊界的中心，右邊界的100則相同。

MVC變量是@ Model.PercentData1，無論它應該在餅圖和餅圖中的相應切片中反映。每個部分都有一個餅圖，每個@ Model.PercentData2,3,4 ...將在他們自己的Pie片上運行。我將條形圖值鏈接或綁定到HTML文本框，並使其與@ Html.TextBoxFor（model => model.PercentData1）一起工作，而EditorFor將不執行任何操作。

最初的目標是找到0,50和100來自哪裏以及它們爲什麼被設置在何處。它們應該與圖表本身隔開，100應該是「100％」

帶有餅圖和條形圖的代碼，某些部分被註釋掉了，將會有10個餅圖，每組一個，其中在不同的，獨特的餡餅切片上運行

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");

來源

2016-02-26 Brad Rogers

xAxis配置應該包含「開始」，「結束」和「步驟」屬性。在另一種情況下，將計算比例。

如果你想改變的「0」和「120」標籤的位置，你可以在「模板」的方法應用CSS樣式：

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; 
    } 
}

來源

2016-07-20 08:35:31 Maria

如何格式化DHTMLX圖表並將值綁定到餅圖？

回答

相關問題