javascript - NVD3折线图单记录问题

标签 javascript jquery html d3.js nvd3.js

Nvd3 chart

嗨,

我在使用 nvd3 折线图时遇到奇怪的问题。对于单个记录,它在图表中间显示数据,对于多个数据,它工作得很好。单个数据的问题是它显示了我真的不想显示的 future 日期。

nv.addGraph(function() {
            var chart = nv.models.lineChart().x(function(d) {
                return d.x
            }).y(function(d) {
                return d.y
            }).color(d3.scale.category10().range())
                    .useInteractiveGuideline(true);

            chart.forceY([0,unitInterval]);

            chart.yAxis.scale().domain([ 0, 9999999 ]);

            var format = ',f';
            chart.yAxis.tickFormat(function(d) {
                return nFormatter(d);
            }).axisLabel('No. Of Records');

            chart.margin({
                bottom : 50,
                left : 75
            });//set margin 

            chart.xAxis.axisLabel("Duration").tickFormat(function(d) {
                return d3.time.format('%x')(new Date(d));
            });

            chart.noData("Data unavailable for current selection.");

            d3.select('#recordChartDiv svg').datum(data).transition()
                    .duration(500).call(chart);

            nv.utils.windowResize(chart.update);

这是我正在使用的代码。如果是单条记录,有人可以帮忙正确安排刻度吗? 这在另一个图表中对于多个数据运行良好。 enter image description here

最佳答案

您希望只有一个数据点的图表是什么样子?

您可以添加一个域和forceX来将积分日期显示为最大值,如下所示: chart.forceX([minDate, 日期]); Chart.xAxis.scale().domain([minDate, date]);

请参阅此 fiddle 示例:https://jsfiddle.net/b3fwowzz/14/

关于javascript - NVD3折线图单记录问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33284207/

相关文章:

javascript - 如何按类名计算元素数量,并将结果转换为变量?

javascript - selectize.js 远程填充其他输入

javascript - Bootstrap 工具提示不适用于 Font Awesome 图标

html - 是否可以使用多个父 div

javascript - 如何根据变量值使 useEffect react 钩子(Hook)重新渲染?

javascript - onselectionchange 更新时变量不更新

javascript - 在 d3.js 中填充两个重叠区域

javascript - 对于 AJAX 帖子和 HTML 表单帖子,是否有一种更简洁的方法来以不同的方式处理快速渲染?

html - html5 输入类型 url 验证中的模式

javascript - 是否有任何 JavaScript 库可以为 HTML 创建一个很好的结构化(树)差异?