图表交互指南默认为光标另一侧的最远值
Chart Interactive Guideline defaults to farthest value of opposite side of cursor
我是 UI 的新手,将 nvd3 与 Bootstrap 一起使用,折线图现在正在做一些奇怪的事情:当鼠标悬停在图表的任一半上时,交互式指南突出显示的 (x,y) 点恢复为图形另一半上的最远值。换句话说,当鼠标悬停在图表的右半边时,第一个数据点被选中,而当鼠标悬停在图表的左半边时,最后一个数据点被选中。我已经验证图表数据是准确的。我正在尝试制作一个 fiddle,如果 fiddle 有效,我将更新此 post,但图表的 Javascript 显示正确。非常感谢!
这是视图的脚本部分:
@section Scripts{
<!-- page specific plugins -->
<!-- nvd3 charts -->
<script src="/Content/lib/d3/d3.min.js"></script>
<script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
<!-- flot charts-->
<script src="/Content/lib/flot/jquery.flot.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.pie.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.resize.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script>
<!-- clndr -->
<script src="/Content/lib/underscore-js/underscore-min.js"></script>
<script src="/Content/lib/CLNDR/src/clndr.js"></script>
<!-- easy pie chart -->
<script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<!-- owl carousel -->
<script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script>
<!-- dashboard functions -->
<script src="/Content/js/apps/tisa_dashboard.js"></script>
<script type="text/javascript">
function cumulativeTestData() {
var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
return [
{
key: "Prices",
values: closes //These generate in source
},
];
}
</script>
}
这里是 Javascript 图表代码:
$(function () {
// nvd3 charts
tisa_nvd3_charts.cumulativeLine();
// flot charts
tisa_flot_charts.social();
tisa_flot_charts.browsers();
// mini calendar
tisa_calendar.miniCal();
// easy chart pie
tisa_easy_pie_chart.init();
// latest images carousel
tisa_carousel.latest_images();
})
// nvd3 charts
tisa_nvd3_charts = {
cumulativeLine: function () {
if ($('#nvd3_cumulativeLine').length) {
nv.addGraph(function () {
var chart = nv.models.lineChart()
.margin({ left: 100 }) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.x(function (d) { return d[0] })
.y(function (d) { return d[1] })
.color(d3.scale.category20().range())
.transitionDuration(250) //how fast do you want the lines to transition?
.clipVoronoi(false);
chart.xAxis //Chart x-axis settings
//.axisLabel('Time (ms)')
.tickFormat(function (d) {
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis //Chart y-axis settings
//.axisLabel('Voltage (v)')
.tickFormat(d3.format('$,.3f'));
/* Done setting the chart up? Time to render it!*/
//var myData = sinAndCos(); //You need data...
d3.select('#nvd3_cumulativeLine svg') //Select the <svg> element you want to render the chart in.
.datum(cumulativeTestData()) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function () { chart.update() });
return chart;
});
}
}
}
以下是 HTML header 中的参考资料:
<!-- nvd3 charts -->
<link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css">
<!-- jQuery -->
<script src="/Content/js/jquery.min.js"></script>
<!-- easing -->
<script src="/Content/js/jquery.easing.1.3.min.js"></script>
<!-- bootstrap js plugins -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- top dropdown navigation -->
<script src="/Content/js/tinynav.js"></script>
<!-- perfect scrollbar -->
<script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<!-- common functions -->
<script src="/Content/js/tisa_common.js"></script>
<!-- page specific stylesheets -->
<!-- owl carousel -->
<link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css">
<!-- google webfonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css">
<!-- date range picker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
<!-- timepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<!-- ion.rangeSlider -->
<link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css">
<!-- bootstrap switches -->
<link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<!-- 2col multiselect -->
<link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet">
<!-- multiselect, tagging -->
<link rel="stylesheet" href="/Content/lib/select2/select2.css">
<!-- main stylesheet -->
<link href="/Content/css/style.css" rel="stylesheet" media="screen">
<!-- moment.js (date library) -->
<script src="/Content/lib/moment-js/moment.min.js"></script>
我不确定为什么,但是如果 .useInteractiveGuideline(true) 行被注释掉,交互式指南就会起作用。我想将其更改为 false 也会起作用,就像 this 人最初所做的那样。不过,我已经定义了 x 轴值,所以 link 仍然对我不起作用。唯一做的就是注释掉交互式指南。
我是 UI 的新手,将 nvd3 与 Bootstrap 一起使用,折线图现在正在做一些奇怪的事情:当鼠标悬停在图表的任一半上时,交互式指南突出显示的 (x,y) 点恢复为图形另一半上的最远值。换句话说,当鼠标悬停在图表的右半边时,第一个数据点被选中,而当鼠标悬停在图表的左半边时,最后一个数据点被选中。我已经验证图表数据是准确的。我正在尝试制作一个 fiddle,如果 fiddle 有效,我将更新此 post,但图表的 Javascript 显示正确。非常感谢!
这是视图的脚本部分:
@section Scripts{
<!-- page specific plugins -->
<!-- nvd3 charts -->
<script src="/Content/lib/d3/d3.min.js"></script>
<script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
<!-- flot charts-->
<script src="/Content/lib/flot/jquery.flot.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.pie.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.resize.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script>
<!-- clndr -->
<script src="/Content/lib/underscore-js/underscore-min.js"></script>
<script src="/Content/lib/CLNDR/src/clndr.js"></script>
<!-- easy pie chart -->
<script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<!-- owl carousel -->
<script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script>
<!-- dashboard functions -->
<script src="/Content/js/apps/tisa_dashboard.js"></script>
<script type="text/javascript">
function cumulativeTestData() {
var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
return [
{
key: "Prices",
values: closes //These generate in source
},
];
}
</script>
}
这里是 Javascript 图表代码:
$(function () {
// nvd3 charts
tisa_nvd3_charts.cumulativeLine();
// flot charts
tisa_flot_charts.social();
tisa_flot_charts.browsers();
// mini calendar
tisa_calendar.miniCal();
// easy chart pie
tisa_easy_pie_chart.init();
// latest images carousel
tisa_carousel.latest_images();
})
// nvd3 charts
tisa_nvd3_charts = {
cumulativeLine: function () {
if ($('#nvd3_cumulativeLine').length) {
nv.addGraph(function () {
var chart = nv.models.lineChart()
.margin({ left: 100 }) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.x(function (d) { return d[0] })
.y(function (d) { return d[1] })
.color(d3.scale.category20().range())
.transitionDuration(250) //how fast do you want the lines to transition?
.clipVoronoi(false);
chart.xAxis //Chart x-axis settings
//.axisLabel('Time (ms)')
.tickFormat(function (d) {
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis //Chart y-axis settings
//.axisLabel('Voltage (v)')
.tickFormat(d3.format('$,.3f'));
/* Done setting the chart up? Time to render it!*/
//var myData = sinAndCos(); //You need data...
d3.select('#nvd3_cumulativeLine svg') //Select the <svg> element you want to render the chart in.
.datum(cumulativeTestData()) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function () { chart.update() });
return chart;
});
}
}
}
以下是 HTML header 中的参考资料:
<!-- nvd3 charts -->
<link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css">
<!-- jQuery -->
<script src="/Content/js/jquery.min.js"></script>
<!-- easing -->
<script src="/Content/js/jquery.easing.1.3.min.js"></script>
<!-- bootstrap js plugins -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- top dropdown navigation -->
<script src="/Content/js/tinynav.js"></script>
<!-- perfect scrollbar -->
<script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<!-- common functions -->
<script src="/Content/js/tisa_common.js"></script>
<!-- page specific stylesheets -->
<!-- owl carousel -->
<link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css">
<!-- google webfonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css">
<!-- date range picker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
<!-- timepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<!-- ion.rangeSlider -->
<link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css">
<!-- bootstrap switches -->
<link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<!-- 2col multiselect -->
<link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet">
<!-- multiselect, tagging -->
<link rel="stylesheet" href="/Content/lib/select2/select2.css">
<!-- main stylesheet -->
<link href="/Content/css/style.css" rel="stylesheet" media="screen">
<!-- moment.js (date library) -->
<script src="/Content/lib/moment-js/moment.min.js"></script>
我不确定为什么,但是如果 .useInteractiveGuideline(true) 行被注释掉,交互式指南就会起作用。我想将其更改为 false 也会起作用,就像 this 人最初所做的那样。不过,我已经定义了 x 轴值,所以 link 仍然对我不起作用。唯一做的就是注释掉交互式指南。