【问题标题】:How setup template file for chart tooltip?如何为图表工具提示设置模板文件?
【发布时间】:2015-07-03 09:39:55
【问题描述】:

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

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

【问题讨论】:

  • angulartJS,不是 angularJS ?
  • “图表工具提示的模板(分隔)”是什么意思?

标签: javascript angularjs kendo-ui


【解决方案1】:

您可以在控制器上定义$scope.tooltipOptions 的位置使用k-tooltip="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 来适应您的样式(工具提示的内容) 需要
  • 列出了您可以从内部访问的信息列表here
  • 如果您打算创建多行,请不要忘记添加“\” 你需要在 1 行中完成它(虽然不利于可读性)

终于来了

DEMO

此外,如果您想将其放在单独的文件中(我不确定我是否 100% 得到您的问题),您可以通过创建页面并添加剑道模板脚本来使用剑道模板

<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())
};

终于来了

DEMO

注意:我没有在单独的文件上创建它,因为我显然不能在剑道道场上这样做,但是这个剑道模板可以放在其他页面上,但您需要将文件导入/链接到当前先存档。阅读更多关于剑道模板here

【讨论】:

  • 谢谢。为什么你使用 ${},我使用 #: #
猜你喜欢
  • 2016-10-19
  • 2011-02-13
  • 1970-01-01
  • 2019-08-04
  • 2015-06-21
  • 1970-01-01
  • 2015-11-01
  • 1970-01-01
  • 2021-01-18
相关资源
最近更新 更多