javascript - SyncFusion JS 图表 - 工具提示行为错误

标签 javascript html svg syncfusion

我正在使用 SyncFusion for Javascript 在我的应用程序中呈现图表。我有一个包含多个系列、连续 X 轴和数据点之间不等间隔的 StepChart。当用户悬停在某个点时,我想显示一个带有描述的工具提示。但它没有按预期工作。 有时会针对错误的点显示工具提示,而对于某些点则根本不会显示。

Wrong tooltip

似乎有一些聪明的算法可以决定应该为每个区域显示什么工具提示...不幸的是,它对我不起作用。 当用户的鼠标刚好在点上时显示工具提示就足够了(因为我的点很大)。

$(function() {
  $("#container").ejChart({
    primaryXAxis: {
      valueType: 'datetime',
      range: {
        min: new Date(1422874800000),
        max: new Date(1422878400000),
        interval: 5
      },
      intervalType: 'Minutes'
    },
    primaryYAxis: {
      title: {
        text: 'Value'
      },
      range: {
        min: 0,
        max: 300
      }
    },
    commonSeriesOptions: {
      type: 'stepline',
      enableAnimation: true,
      marker: {
        shape: 'circle',
        size: {
          height: 12,
          width: 12
        },
        visible: true
      },
      border: {
        width: 2
      },
      tooltip: {
        visible: true,
        format: "#point.x#<br/>#series.name# value is #point.y# "
      }
    },

    series: [{
      "name": "Line 1",
      "enableAnimation": false,
      "points": [{
        "x": new Date(1422874800000),
        "y": 100
      }, {
        "x": new Date(1422875280000),
        "y": 160
      }, {
        "x": new Date(1422875520000),
        "y": 200
      }, {
        "x": new Date(1422876180000),
        "y": 200
      }]
    }, {
      "name": "Line 2",
      "enableAnimation": false,
      "points": [{
        "x": new Date(1422874800000),
        "y": 50
      }, {
        "x": new Date(1422875400000),
        "y": 170
      }, {
        "x": new Date(1422875880000),
        "y": 180
      }, {
        "x": new Date(1422876180000),
        "y": 180
      }]
    }, {
      "name": "Line 3",
      "enableAnimation": false,
      "points": [{
        "x": new Date(1422874800000),
        "y": 120
      }, {
        "x": new Date(1422874980000),
        "y": 140
      }, {
        "x": new Date(1422875400000),
        "y": 240
      }, {
        "x": new Date(1422875880000),
        "y": 260
      }, {
        "x": new Date(1422876180000),
        "y": 260
      }]
    }],
    canResize: true,
    title: {
      text: 'Step Chart'
    },
    legend: {
      visible: true
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://js.syncfusion.com/demos/web/scripts/jquery.globalize.min.js"></script>
<link href="http://js.syncfusion.com/demos/web/themes/ej.widgets.core.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-responsive.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/bootstrap.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<link href="http://js.syncfusion.com/demos/web/themes/default-theme/ej.theme.min.css" rel="stylesheet" />
<script src="http://js.syncfusion.com/demos/web/scripts/ej.web.all.min.js"></script>
<div class="content-container-fluid">
  <div class="row">
    <div class="cols-sample-area">
      <div id="container"></div>
    </div>
  </div>
</div>

感谢任何帮助!

最佳答案

所述问题已修复,修复包含在 2015 年第 1 卷 Essential 工作室版本中,该版本于 2015 年 4 月的第一周推出。可从以下链接下载

链接:http://www.syncfusion.com/forums/118723/essential-studio-2015-volume-1-final-release-v13-1-0-21-available-for-download

如果有帮助请告诉我

关于javascript - SyncFusion JS 图表 - 工具提示行为错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28322759/

相关文章:

html - Bootstrap 4 : Multilevel Dropdown Inside Navigation

javascript - 如何将参数从一个html页面传递到另一个

javascript - 在菜单上滑动 Logo 和文本单击

Html 文本区域转 svg 文本

javascript - 是否有用于测试使用 Gherkin DSL 的 Javascript 的 BDD 框架?

javascript - 跨域ajax post中回调函数未定义

javascript - 我怎样才能允许 resizable() 增加大小超过初始大小?

来自路径的 CSS3 动画。如何实现?

python - 使用动态鼠标悬停事件抓取网站

javascript - 到达文档顶部时,需要激活位于顶部图像下方的自动/隐藏标题