KendoUI stockchart标记绘制对轴的问题

时间:2015-06-04 12:32:58

标签: charts kendo-ui

我正在尝试使用kendoUI创建一个股票图表。事情很好但有一些问题。标记的绘图不符合预期。它没有放在图表区域上的所需点上。

enter image description here

以下是我为此所做的代码:

$($context).kendoStockChart({
    dataSource : {
        data : data.ChartData,
        sort : {
            field : "Date",
            dir : "asc"
        }
    },
    seriesDefaults : {
        markers : {
            background : function (a) {
                return a.dataItem.color;
            },
            visible : true,
            type : "triangle",
            size : 18
        },
        line : {
            width : 0
        }
    },
    series : [{
            type : "line",
            field : "Index",
            categoryField : "Date",
            labels : {
                background : "transparent",
                color : function (a) {
                    return a.dataItem.color === "#000000" ? "#ffffff" : "ffffff";
                },
                visible : true,
                position : "insideEnd",
                margin : {
                    top : 8,
                    left : -18
                },
                font : "10px sans-serif",
                center : '5%',
                template : "#= dataItem.TotalCount > 1 ? dataItem.TotalCount : '' #"
            }

        }
    ],
    title : {
        text : "Time View Chart"
    },
    dateField : "Date",
    navigator : {
        series : {
            type : "line",
            field : "Index",
            categoryField : "Date",
            markers : {
                visible : true,
                type : "triangle",
                size : 8
            }
        }
    },
    valueAxis : {
        labels : {
            //format: "{0}",
            visible : true,
            template : function (obj) {
                return data.indexCategories[obj.value] || "";
            }
        },
        minorUnit : 1,
        majorUnit : 1,
        title : {
            text : ""
        },
        line : {
            visible : true
        }
    }
});

1 个答案:

答案 0 :(得分:1)

尝试将categoryAxis justified属性设置为false,然后为valueAx设置min和max值,以包含所有积分,并留出一些余地。

 categoryAxis: {
    justified: false,
 },
 valueAxis: {
    min: <lowest val in your data>,
    max: <highest value plus some margin for the trianb=gle marker>
 },
  

<强> DEMO