Как отформатировать диаграмму DHTMLX и привязать значение к круговой диаграмме?

Question

Я пытаюсь отформатировать простую горизонтальную гистограмму DHTMLX; Затем привяжите значение к одному из Pie-фрагментов в связанной круговой диаграмме вместе с привязкой к текстовому полю MVC в форме редактирования.

Задача 1: Горизонтальная гистограмма имеет 3 ярлыка: 0, 50, 100. Не то, что я хотел, но все в порядке, что не в порядке - это формат. 0 установлен так, что его половина на гистограмме, 50 центрирована и хорошо, 100 также находится на полпути над правым концом диаграммы. Каждый и любой параметр, который я могу найти, в течение нескольких дней, я изменил и НИЧЕГО изменил это.

Где это должно быть: 0 [... данные диаграммы .. 50 ... таблица данные ..] 100 его отображение как ([) .... данные ... 50 ... данные. .. 10]) с левым 0, сидящим в центре границы графика, то же самое для 100 на правой границе.

Переменная MVC - это @ Model.PercentData1 и любой ее набор, который должен отражать как на гистограмме, так и на соответствующем фрагменте в круговой диаграмме. Каждая секция будет иметь круговую диаграмму, и каждый @ Model.PercentData2, 3, 4 ... будет работать на своем собственном кусочке пирога. У меня было значение barchart, связанное или связанное с текстовым полем 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"); 

Answer 1

Конфигурация 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; 
    } 
}