javascript - 删除 nvd3 中刻度之间的空格-6ren

javascript - 删除 nvd3 中刻度之间的空格

转载作者：行者123 更新时间：2023-11-30 00:12:10

25

4

跟随问题NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis :

简而言之:

The problem I have encountered now is that my data is wrongly aligned with the Axis

问题

当我一天(或更多天)没有数据时，图表会“保存”缺失的一天的位置。我想避免它。

我知道我可以使用 0 添加缺失的一天的数据，但我的问题是如果没有它我是否可以这样做。

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 500,
      useInteractiveGuideline: true,
      xAxis: {
        tickFormat: function(d) {
          return d3.time.format('%H %d/%m')(new Date(d));
        },
        rotateLabels: -45,
        tickValues: function(values) {
          var a =  _.map(values[0].values, function(v) {
            return new Date(v.x);
          });
          return a;
        }
      }
    }
  };


  $scope.data = [
    // date, series1, series2, series
    [1446418800000, 2, 2, 1],
    [1446505200000, 0, 0, 0],
    [1446591600000, 14, 12, 2],
    [1446678000000, 65, 38, 27],
    [1446764400000, 11, 6, 5],
    // [1446850800000, 0, 0, 0],
    // [1446937200000, 0, 0, 0],
    [1447023600000, 6, 4, 2],
    [1447110000000, 0, 0, 0],
    [1447196400000, 0, 0, 0],
    [1447282800000, 0, 0, 0],
    [1447369200000, 12, 2, 10],
    [1447455600000, 0, 0, 0],
    [1447542000000, 0, 0, 0],
    [1447628400000, 0, 0, 0],
    [1447714800000, 1, 0, 1]
  ];

  var graphData = function(data, labels, colors) {
    var series = [];

    // first(0) value is date
    for (var i = 1; i < data[0].length; i++) {
      var values = [];
      for (var j = 0; j < data.length; j++) {
        values.push({
          x: data[j][0], // x is date
          y: data[j][i] // y is value
        });
      }
      series.push({
        values: values, // graph data
        key: labels[i - 1], // the label
        color: colors[i - 1] // color of series
      });
    }
    return series;
  };

  $scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
    <script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
  </body>
</html>

http://plnkr.co/edit/42uzlu4AjnHJpI7o41l3?p=preview

最佳答案

感谢@krispo在 github这是答案:

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 500,
      useInteractiveGuideline: true,
      x: function(d){ return d.i},
      xAxis: {
        tickFormat: function(d) {
          var data = $scope.graphData[0].values[d].x;
          return d3.time.format('%H %d/%m')(new Date(data));
        },
        rotateLabels: -45,
        tickValues: function(values) {
          var a =  _.map(values[0].values, function(v,i) {
            return i
          });
          return a;
        },
        showMaxMin: false
      }
    }
  };


  $scope.data = [
    // date, series1, series2, series
    [1446418800000, 2, 2, 1],
    [1446505200000, 0, 0, 0],
    [1446591600000, 14, 12, 2],
    [1446678000000, 65, 38, 27],
    [1446764400000, 11, 6, 5],
    // [1446850800000, 0, 0, 0],
    // [1446937200000, 0, 0, 0],
    [1447023600000, 6, 4, 2],
    [1447110000000, 0, 0, 0],
    [1447196400000, 0, 0, 0],
    [1447282800000, 0, 0, 0],
    [1447369200000, 12, 2, 10],
    [1447455600000, 0, 0, 0],
    [1447542000000, 0, 0, 0],
    [1447628400000, 0, 0, 0],
    [1447714800000, 1, 0, 1]
  ];

  var graphData = function(data, labels, colors) {
    var series = [];

    // first(0) value is date
    for (var i = 1; i < data[0].length; i++) {
      var values = [];
      for (var j = 0; j < data.length; j++) {
        values.push({
          i: j,
          x: data[j][0], // x is date
          y: data[j][i] // y is value
        });
      }
      series.push({
        values: values, // graph data
        key: labels[i - 1], // the label
        color: colors[i - 1] // color of series
      });
    }
    return series;
  };

  $scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
  console.log($scope.graphData);

});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> -->
    <script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
    <script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>

    <!--<script src="app.js"></script>-->
  </head>
  <body ng-controller="MainCtrl">
    <nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
  </body>
</html>

plnkr

关于javascript - 删除 nvd3 中刻度之间的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36012638/

25

4

0

文章推荐： java - 调用电话时哈希按钮不起作用

文章推荐： java - JSON错误加载

文章推荐： android - Fragment 中的 Click 事件泄漏到父 Activity 布局

文章推荐： java - 崩溃可能是由于错误的 Activity 布局

r - R中XY图上的多轴/刻度
如何使用 plot() 在 XY 图中绘制第二条线，以不同的比例(如本例(紫色线))？第一行(红色)我的 R 代码是这样的: p <- sqlQuery(ch,"SELECT wl,param1 F
javascript - 谷歌折线图只有完整的步骤/刻度
我正在寻找一种将折线图步骤设置为仅完整数字步骤的方法，例如 1,2,3,4,5..... 目前它看起来像这样: 这些是我的选择。我搜索了很多但找不到解决方案。 let options = {
r - 调整堆积条形图中的 Y 刻度
我的问题是如何将 Y 轴刻度的间隔从 0.2 更改为 0.1？我已经尝试了一切，但我很困!帖子底部堆叠条形图的图片 dpi=600 #pixels per square inch A <- c(
javascript - 根据数据范围动态设置 D3 刻度
有没有办法根据当前数据集在 D3 轴上动态设置 ticks。我遇到的问题是我的时间范围(x 轴)可能变化很大。对于一些数据集来说，它是几年的值(value)，对于其他数据集来说是几个月，在某些情况下只
javascript - 绘制没有轴标签(刻度)的道场蜘蛛图
我已经使用默认参数创建了一个 dojo 蜘蛛图。我需要隐藏轴标签(刻度上的数据值，而不是轴标题)。我已经尝试过'ticks: false'，但是它不适用于蜘蛛图。 require(["dojo/_b
matlab - matlab中的自定义 Axis 刻度
有没有一种简单的方法可以在绘图 Axis 上获得自定义缩放比例？例如，semilogy 函数提供 {x, log10(y)} 缩放比例，这样就可以自动放大/缩小并自动调整刻度和标签。我想对 {x,
Python bokeh修改 Axis 刻度
如何修改图形和图表的 y Axis 刻度？我想要这样的东西:my_figure.y_range.end = my_figure.y_range.end * 1.3 所以我想要更高一点的y轴。谢谢! 最
javascript - Recharts 不会自动计算 YAxis 刻度
我正在尝试使用 recharts 添加图表一些货币的最新汇率。数据显示正确，但图表始终从 0 开始并略高于最大值。图表是正确的，但它不需要从 0 开始，因为这样做，它几乎是一条线。这是图表的图片:
swt - 如何将标签添加到 SET Scale 刻度？
我有一个 SWT Scale 小部件，我需要在刻度上的刻度上添加标签。有没有办法做到这一点？也许在 slider 小部件上？谢谢最佳答案这可能不是您所要求的，但您可以在 Scale 小部件旁边
python - plotly :如何摆脱多余的 xaxis 刻度？
这是一个从 .xlsx 文件中读取数据并利用 Plotly 库绘制气泡图的程序。这是 .xlsx 文件的原始数据: 1991 1992 1993 1994 1995
javascript - D3 - 将变量传递到 x 刻度
我这里有一个代码笔 - https://codepen.io/anon/pen/yvgJKB 我有一个简单的堆积条形图。我想将其制作成一个组件，因此我需要传入值以使其可重用 x 缩放函数返回d.da
javascript - Highcharts:强制显示 yAxis 刻度
让我们看一个基本的演示折线图: jsfiddle $(function () { $('#container').highcharts({ //all the code there 我想强制
.net - T-sql、刻度、时间戳
是否可以在 t-sql 中获得像 DateTime.Ticks 这样的 C# 内容？感谢帮助最佳答案您不太可能从 SQL 中获得与 DateTime.Ticks 相同的精度，因为 SQL 不能以
python - 修复 Bokeh 散点图中的轴间距(刻度)
我正在使用 Bokeh 生成散点图，每个 X 值具有不同的 Y 值。当 Bokeh 生成绘图时，它会根据绘制的值的数量自动填充 x 轴间距。我希望 x 轴上的所有值均匀分布，无论单个数据点的数量如何。
javascript - 隐藏/删除谷歌图表中的 y 刻度
我使用下面的代码使用谷歌图表生成折线图 google.charts.load('current', {packages: ['corechart', 'line']});
javascript - d3 条形图上的 y 刻度
我正在尝试在 d3 中构建堆积条形图。这是我的 jsfiddle: http://jsfiddle.net/maneesha/gwjkgruk/4/ 我正在尝试修复它，使 y 轴从零开始。我认为这
javascript - d3 - 如何根据周格式化 xAxis 刻度
我有一个 d3 时间刻度图表。目前，轴刻度为每个数据对象呈现一个日期。例如，数据的范围可以是 1 天的数据、1 个月内 2 周的数据、5 个月的数据甚至更多。理想情况下，我们希望显示带有周数的刻度，
javascript - Google Material 折线图 - 刻度
当使用“Cassic”折线图时，我可以为 hAxis 分配刻度，还有这样的格式和标题: var options = { hAxis: { format:'h a', title
javascript - NVD3 如何正确设置 y 刻度？
我的累积折线图没有正确构建 yScale。给定要构建图表的数据: var data = [{ key: "Page view", values: [ ["2013-07-01 00:
javascript - jqPlot 两次显示 y 刻度
在 y 轴上使用两个具有正常整数值的 DateAxisSeries(x 轴)我的 jqPlot 将 y 刻度呈现两次。像这样: 2| 2| 1| 1| 0|_____________________

首页

博学

6Ren·AI

商城

javascript - 删除 nvd3 中刻度之间的空格