如何设置 DHTMLX 图表的格式并将值绑定到饼图

Question

我正在尝试格式化一个简单的DHTMLX堆叠水平条形图;然后将该值绑定到关联的饼图中的其中一个饼图扇区，并将其绑定到编辑窗体中的 MVC 文本框。

问题 1：水平条形图显示 3 个标签：0、50、100。 不是我想要的，但它没关系，不行的是格式。 0 设置为其在条形图的中间位置，50 居中且正常，100 也位于图表右端的一半。 几天来，我能找到的每一个设置都进行了修改，没有什么可以改变这一点。

它应该在哪里： 0 [ ...图表数据.. 50 ...图表数据.. ] 100它显示为 （[） ....数据。。。50 ...数据。。。10]），左边的 0 位于图表边框的中心，右边框上的 100 也是如此。

MVC 变量为 @Model.PercentData1，无论其设置为什么，都应反映在条形图和饼图中的相应扇区中。 每个部分都有一个饼图，每个@Model.百分比数据2，3，4...将在自己的馅饼切片上运行。 我将条形图值链接或绑定到 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;
    }
}