Hum*_*ity 5 html javascript svg syncfusion
我正在使用SyncFusion for Javascript在我的应用中呈现图表.我有一个StepChart,有几个系列,连续的X轴和数据点之间的不等间隔.当用户悬停特定点时,我想显示带有描述的工具提示.但它没有按预期工作.有时,工具提示会显示错误的点,对于某些点,它们根本不会显示.

似乎有一些聪明的算法决定应该为每个区域显示什么工具提示......不幸的是,它对我不起作用.仅当用户的鼠标正好在点上时显示工具提示就足够了(因为我的点很大).
$(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
}
});
});Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
任何帮助表示赞赏!
| 归档时间: |
|
| 查看次数: |
577 次 |
| 最近记录: |