个人中心
gpt4 book ai didi

javascript - nvd3 chart.useInteractiveGuideline(true);没有正确更新

转载 作者：行者123 更新时间：2023-12-01 15:23:07 25 4
gpt4 key购买 nike

我在使用 nvd3 时遇到了一个问题，我得到了正确呈现的折线图，但交互式指南似乎无法正常工作。目前，当它呈现时，我将鼠标移到图表上，它只显示第一个日期和最后一个日期。任何帮助将不胜感激。

代码:

<script src="forecast/static/nvd3/lib/d3.v3.js"></script>
<script src="forecast/static/nvd3/nv.d3.js"></script>
<script src="forecast/static/nvd3/src/core.js"></script>
<script src="forecast/static/nvd3/src/tooltip.js"></script>
<script src="forecast/static/nvd3/src/utils.js"></script>
<script src="forecast/static/nvd3/src/interactiveLayer.js"></script>
<script src="forecast/static/nvd3/src/models/legend.js"></script>
<script src="forecast/static/nvd3/src/models/axis.js"></script>
<script src="forecast/static/nvd3/src/models/scatter.js"></script>
<script src="forecast/static/nvd3/src/models/line.js"></script>
<script src="forecast/static/nvd3/src/models/lineChart.js"></script>
<link type="text/css" rel="stylesheet" href="forecast/static/nvd3/nv.d3.css" />

<title>Foreign Exchange</title>

<body>
<h1>Foreign Exchange</h1>

<div id="chartZoom">
    <a href="#" id="zoomIn">Zoom In</a> <a href="#" id="zoomOut">Zoom Out</a>
</div>

<div id="fx" class='with-transitions'>
    <svg></svg>
</div>

</body>
<script type="text/javascript">
nv.addGraph(function() {
var chart = nv.models.lineChart();
var fitScreen = false;
var width = 600;
var height = 300;
var zoom = 1;

chart.useInteractiveGuideline(true);
chart.xAxis
    .axisLabel('Time (days)')
    .rotateLabels(-45)
    .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

chart.yAxis
    .axisLabel('CAD/USD ($)')
    .tickFormat(d3.format(',.2f'));

d3.select('#fx svg')
    .attr('perserveAspectRatio', 'xMinYMid')
    .attr('width', width)
    .attr('height', height)
    .datum(data());

setChartViewBox();
resizeChart();

// These resizes both do the same thing, and require recalculating the chart
//nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#fx svg').call(chart) });
nv.utils.windowResize(resizeChart);

d3.select('#zoomIn').on('click', zoomIn);
d3.select('#zoomOut').on('click', zoomOut);


function setChartViewBox() {
    var w = width * zoom,
        h = height * zoom;

    chart
        .width(w)
        .height(h);

    d3.select('#fx svg')
        .attr('viewBox', '0 0 ' + w + ' ' + h)
        .transition().duration(500)
        .call(chart);
}

function zoomOut() {
    zoom += .25;
    setChartViewBox();
}

function zoomIn() {
    if (zoom <= .5) return;
    zoom -= .25;
    setChartViewBox();
}

// This resize simply sets the SVG's dimensions, without a need to recall the chart code
// Resizing because of the viewbox and perserveAspectRatio settings
// This scales the interior of the chart unlike the above
function resizeChart() {
    var container = d3.select('#fx');
    var svg = container.select('svg');

    if (fitScreen) {
        // resize based on container's width AND HEIGHT
        var windowSize = nv.utils.windowSize();
        svg.attr("width", windowSize.width);
        svg.attr("height", windowSize.height);
    } else {
        // resize based on container's width
        var aspect = chart.width() / chart.height();
        var targetWidth = parseInt(container.style('width'));
        svg.attr("width", targetWidth);
        svg.attr("height", Math.round(targetWidth / aspect));
    }
};

return chart;
});

function data() {
var x_data = [1394002800000, 1393916400000, 1393830000000, 1393570800000, 1393484400000, 1393398000000, 1393311600000, 1393225200000, 1392966000000, 1392879600000, 1392793200000, 1392706800000, 1392361200000, 1392274800000, 1392188400000, 1392102000000, 1392015600000, 1391756400000, 1391670000000, 1391583600000, 1391497200000, 1391410800000, 1391151600000, 1391065200000, 1390978800000, 1390892400000, 1390806000000, 1390546800000, 1390460400000, 1390374000000, 1390287600000, 1390201200000, 1389942000000, 1389855600000, 1389769200000, 1389682800000, 1389596400000, 1389337200000, 1389250800000, 1389164400000, 1389078000000, 1388991600000, 1388732400000, 1388646000000, 1388473200000, 1388386800000, 1388127600000, 1387868400000, 1387782000000, 1387522800000, 1387436400000, 1387350000000, 1387263600000, 1387177200000, 1386918000000, 1386831600000, 1386745200000, 1386658800000, 1386572400000, 1386313200000, 1386226800000, 1386140400000, 1386054000000, 1385967600000, 1385708400000, 1385622000000, 1385535600000, 1385449200000, 1385362800000];
var y_data = [0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.91, 0.91, 0.91, 0.91, 0.91, 0.91, 0.91, 0.91, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.9, 0.91, 0.91, 0.91, 0.92, 0.91, 0.91, 0.92, 0.92, 0.92, 0.93, 0.93, 0.94, 0.94, 0.94, 0.94, 0.94, 0.93, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.93, 0.94, 0.94, 0.94, 0.94, 0.94, 0.95, 0.95];
var data = [];
for(var i=0, len=x_data.length; i < len; i++){
    data.push({x: new Date(x_data[i]), y: y_data[i]});
}

return [
    {
        values: data,
        key: 'USD/CAD Exchange Rate',
        color: '#08c'
    }
];
}
</script>

最佳答案

NVD3 似乎要求您的 x 轴数据从最早到最新排序，而不是像您的相反。如果我反转数据，一切正常——只是 .reverse() 两个数据数组。

完整示例 here .

关于javascript - nvd3 chart.useInteractiveGuideline(true);没有正确更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22259025/

25 4 0
文章推荐： Spring Security - 未创建默认表
文章推荐： oracle - 从哪里获得 Oracle TKPROF.exe 实用程序？
文章推荐： Java读入一个文本文件，然后分成单独的数组
文章推荐： ios - 如何使用 AVPlayer 擦洗音频？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com