Question

我是UI的新手，并且使用带有Bootstrap的nvd3，并且线图现在正在做一些奇特的事情：当鼠标悬停在图表的任何一半上时，交互式指南和突出显示的（x，y）点将恢复为图表另一半的最远值。换句话说，当将鼠标悬停在图表的右半部分时，将选择第一个数据点，当将鼠标悬停在图表的左半部分时，将选择最后一个数据点。我已经确认图表数据是准确的。如果小提琴有效，我正试图制作一个小提琴并将更新这篇文章，但图表的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标题中的引用：

<!-- 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&amp;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>

Answer 1

我不确定原因，但如果注释掉.useInteractiveGuideline（true）行，则交互式指南会起作用。我想将它改为假也行，就像this人最初做的那样。不过，我已经定义了x轴值，因此链接仍然不适用于我。唯一能做的就是评论互动指南。

图表交互式指南默认为光标

1 个答案: