kendoui 图表带状线

Question

我正在使用 Kendo UI。我有一个 mvc 4.0 网站。我有一张图表。我正在尝试找到一种在 Kendo UI 带状图上放置带状线的方法。我已经查看了文档，但我还没有找到在 mvc 中执行此操作。有人这样做过吗？我如何在 kendo ui dataviz mvc 图表上放置一条带状线？

我有两张图片来显示我拥有的和我想要的。如何将图像上传到 StackOverflow？

我有什么。

我想要什么。

Answer 1

我经过很多努力才弄清楚这一点。

我在控制器上编写了一个函数，将文本返回到该行的左侧和右侧。然后找到文本的位置后。我在文本片段之间画一条线。

function buildPastFence() {
    $.ajax({
        type: "POST",
        url: "Home/GetPastFreezeFence",
        data: "{journalingFlag: '" + $.cookie('WeeklyMonthly') + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            //alert("buildPastFence:" + response);
            if (response === null) { return; }
            if (response) {
                var responses = response.split(",", 2);
                putLineOnChart(responses[0], responses[1]);
            }
        }
    });

function putLineOnChart(leftMarker, rightMarker) {

    //alert("putLineOnChart(" + leftMarker + "," + rightMarker + ")");

    var elBeforeProdFrzFnc = $("text:contains('" + leftMarker + "')").filter(function () { return $(this).text() === leftMarker; });
    if (elBeforeProdFrzFnc==undefined) return;
    var elAfterProdFrzFnc = $("text:contains('" + rightMarker + "')").filter(function () { return $(this).text() === rightMarker; });
    if (elAfterProdFrzFnc == undefined) return;

    var elBeforeProdFrzFncX = parseInt(elBeforeProdFrzFnc.attr("x"));
    var elBeforeProdFrzFncY = parseInt(elBeforeProdFrzFnc.attr("y"));
    var elAfterProdFrzFncX = parseInt(elAfterProdFrzFnc.attr("x"));
    //var elAfterProdFrzFncY = parseInt(elAfterProdFrzFnc.attr("y"));
    //alert("putLineOnChart:" +elBeforeProdFrzFncX +"," +elBeforeProdFrzFncY +":" +elAfterProdFrzFncX +"," +elAfterProdFrzFncY);
    var elBeforeProdFrzFncYhigh = elBeforeProdFrzFncY / 5;

    var xAve = (elBeforeProdFrzFncX + elAfterProdFrzFncX) / 2 + 20;
    var yStart = elBeforeProdFrzFncY;
    var xdelta = xAve;
    var ydelta = elBeforeProdFrzFncYhigh;

    var elBeforeProdFrzFncParent = elBeforeProdFrzFnc.parent().parent();

    //var pathElement = elBeforeProdFrzFncParent.createElement("path");
    var pathElement = document.createElementNS ? document.createElementNS('http://www.w3.org/2000/svg', 'path') : document.createElement('path');

    //pathElement.setAttribute("d", "M" + xAve + " " + elBeforeProdFrzFncY + " " + xAve + " " + elBeforeProdFrzFncYhigh);
    pathElement.setAttribute("d", "M " + xAve + ", " + yStart + " L " + xdelta + ", " + ydelta);
    pathElement.setAttribute("stroke", "#AA6A15");
    pathElement.setAttribute("stroke-width", "4");
    pathElement.setAttribute("stroke-linecap", "square");
    pathElement.setAttribute("stroke-linejoin", "round");
    pathElement.setAttribute("fill-opacity", "1");
    pathElement.setAttribute("stroke-opacity", "1");
    pathElement.setAttribute("fill", "none");

    elBeforeProdFrzFncParent.append(pathElement);
}