如何为图表工具提示设置模板文件？

Question

我使用angularJS和剑道。如何为图表工具提示设置模板(分离)？

<div id="buildLogChart" kendo-chart
     k-tooltip="{ visible: true, template: '#TooltipTemplate' }">
</div>

Answer 1

您可以使用k-tooltip="tooltipOptions"在控制器上定义$scope.tooltipOptions，然后可以简单地从控制器中设置模板，例如

$scope.tooltipOptions =  {
      visible :true,
      template : "<div id='testId' class='testClass' style='font-size:15px;'>\
                     <div>${series.name}</div>\
                     <div>${series.color}</div>\
                     <div>${value}</div>\
                  </div>"
};

说明：

• 您几乎可以使用id类或内联css来满足样式设计(工具提示的内容)的需要。
• 您可以从内部访问的信息列表为这里。
• 不要忘记添加'\‘，如果你打算创建一个多行，否则你需要用1行完成它(不过，对可读性不好)

最后这里

演示

另外，如果您想将它放在单独的文件中(我不确定我是否100%地理解了您的问题)，您可以通过创建一个页面并添加一个kendo模板脚本来使用kendo模板

<script id="customTooltipTemplate" type="text/x-kendo-template">
  <div id='testId' class='testClass' style='font-size:15px; color:black; background-color:white;'>
        <div>${series.name}</div>
        <div>${series.color}</div>
        <div>${value}</div>
  </div>
</script>

然后将该文件导入/链接到您的控制器，然后您可以使用它如下：

$scope.tooltipOptions =  {
    visible :true,
    template : kendo.template($("#customTooltipTemplate").html())
};

最后这里

演示

注意:我不是在一个单独的文件上创建它，因为我显然不能在kendo dojo上这样做，但是这个kendo模板可以放在其他页面上，但是您需要首先将该文件导入/链接到当前文件。阅读更多关于kendo模板这里的信息