Question

我需要自定义剑道折线图的标签（如bubbletalk）。我构建了一个模板（就像在这个kendo测试中：http://dojo.telerik.com/@PMcDonou/URiZA。我从一个管理解决方案中获取了一个kendo论坛帖子中的这个演示），它在第一次加载页面时起作用，但在某些情况下，kendo UI不会渲染标签。问题出现在这两种情况中：

当我手动刷新图表时，需要点击按钮滚动页面。
当我刷新页面（F5）后，我向下滚动页面。

我注意到标签的位置根据滚动给出的顶部偏移向上移动。

我做了这个小提琴，让你看到第一个案例。有关第二种情况的示例，请在整个屏幕页面中查看小提琴，尝试向下滚动并刷新页面（F5）并在多个滚动位置尝试此操作。感谢您的关注，请帮助我。

＆＃13;

 <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table align="center" bgcolor="#CCCCCC" border="0" cellpadding="0"
    cellspacing="1" width="300">
        <tr>
            <td>
                <form method="post" name="">
                    <table bgcolor="#FFFFFF" border="0" cellpadding="3"
                    cellspacing="1" width="100%">
                        <tr>
                            <td align="center" colspan="3"><strong>User
                            Login</strong></td>
                        </tr>
                        <tr>
                            <td width="78">Username</td>
                            <td width="6">:</td>
                            <td width="294"><input id="username" name=
                            "username" type="text"></td>
                        </tr>
                        <tr>
                            <td>Forename</td>
                            <td>:</td>
                            <td><input id="forename" name="forename"         
                            "text"></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td><input name="submit" type="submit" 
                            "Login"> <input name="reset" type="reset"  
                            "reset"></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
 <?php
    if (isset($_POST['submit'])) {     
        include("db_connect1.php");

        require "includes/functions.php";
        session_start();

        $username=$_POST['username'];
        $forename=$_POST['forename'];
        $player_id = $_SESSION['player_id'];      
        $_SESSION['login_user']=$username; 
        $query = mysql_query("SELECT username FROM Player WHERE username='$username' and forename='$forename'");
        if (mysql_num_rows($query) != 0) {
            echo "<script language='javascript' type='text/javascript'> location.href='index.php' </script>";     
        }

        //if(mysql_num_rows($query) !=0){
            //echo ".$_GET["playerid"]."

        else {
            echo "<script type='text/javascript'>alert('User Name Or Password Invalid!')</script>";
        }
    }
?>
</body>
</html>

＆＃13;

function createChart(){
      var dataSource = new kendo.data.DataSource({
        data: [{
          category: "A", value: 10
        }, {
          category: "B", value: 20
        }, {
          category: "C", value: 30
        }]
      });

      var labelTemplate = kendo.template($("#labelTemplate").html());
      $("#chart").kendoChart({
        dataSource: dataSource, series: [{
          type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
            visible: true, template: "#= category #", visual: function(e) {
              var dataItem = $.grep(dataSource.data(), function(item) {
                return item.category === e.text;
              })[0];
                // Label origin position (same as where the original label would be)
                var origin = e.rect.origin;
                var content = $('<div/>')
                  .css({
                    position: "absolute",
                    font: "11px Arial,Helvetica,sans-serif",
                    left: 0,
                    top: 0
                  })
                  .appendTo(document.body)
                  .html(labelTemplate(dataItem));
                var visual = new kendo.drawing.Group();

                kendo.drawing.drawDOM(content).done(function(group) {
                  // Place drawn shapes on original label position
                  group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
                  visual.append(group);

                  // Remove element from DOM
                  content.remove();
                });

                return visual;
            }
          }
        }]
      });
    }

    $(function(){
        createChart();
        $("#refreshChart").on("click", function(){
            $("#chart").data("kendoChart").refresh();
        })
    });

＆＃13;

.talk-bubble {
      width: auto;
      height: auto;
      background-color: red;
      color: white;
      border-radius: 30px;
    }

    .talktext {
      padding: 1em;
      text-align: left;
      line-height: 1.5em;
    }

    .talktext p {
      /* remove webkit p margins */
      -webkit-margin-before: 0em;
      -webkit-margin-after: 0em;
    }

＆＃13;

如何正确呈现kendo图表自定义标签

0 个答案: