标签: angular-nvd3

我需要在我的累积Nvd3图表中添加多个y轴,是否有人知道我需要修改的库代码的哪一部分？

如果你自己做了这件事并且可以提供一个Jsfiddle,那就更好了.

任何建议,将不胜感激.

我想使用angular-nvd3创建一个LINE图表,每个数据点顶部都有标签并显示数据值.我能够找到选项"showValues",它可以用于discreteBarChart,但这些选项似乎不适用于折线图.

有帮助吗？下面是我想要的图片.更新:我知道事实上"showValues"不在LineChart中.但有没有解决方法.？

我遵循angular-nvd3示例,并想要更改图表的背景颜色.我查看了这个http://krispo.github.io/angular-nvd3/#/lineChart, 但我没有看到任何可以设置背景颜色的地方.任何帮助？顺便说一句,我的情节看起来像黑色背景.

我使用suing "d3": "^4.10.0",并"@types/d3": "^4.10.0",在我的角度4项目中突然开始抛出错误

ERROR in @types/d3-geo/index.d.ts (39,19): Namespace '"@types/geojson/index"' has no exported member 'CoordinateReferenceSystem'.

我遇到过这个使用geojson的文件 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/d3-geo/index.d.ts

但我觉得geojson的类型定义没有更新,或者我使用的是worng版本,有人可以帮助我.

每当我点击其中一个点时,它就会导致图表更新.只有在我ngClick对<nvd3>元素有一个指令时才会发生这种情况(即使监听器函数什么都不做).如果我删除了ngClick,一切都很好.

我正在使用一个非常基本的nvd3散点图angular-nvd3.

什么可能导致这种奇怪的互动？

(此录制的帧率很低,因此很难看到,但每次点击都会重新绘制图表,包括顶部的图表)

这是一个再现问题的plunker:

http://plnkr.co/edit/F0ZslBaisoHWIp0VcI8o

谢谢!

更新我把它缩小到angular-nvd3内的手表.不知何故,ngClick的存在导致'数据'发生变化.此行触发刷新:https://github.com/krispo/angular-nvd3/blob/master/dist/angular-nvd3.js#L328 我的代码中没有任何内容可以更改"数据"(也验证了对象是在指令之外的同一个实例),而我在angular-nvd3.js中看不到任何可以改变数据的东西......嗯......

更新 这是我的点击事件监听器(它是空的):

controller.handleChartClick = function(event) {
};

和HTML:

<div class="col-sm-10">
    <nvd3 ng-click="observationsCharts.handleChartClick($event)"
              options="observationsCharts.scatterPlotChartOptions"
              data="observationsCharts.scatterPlotChartData"></nvd3>
</div>

是否有任何angularjs库可以绘制带有堆叠条+线的图表？像这样:

我正在寻找任何支持它的库,使用angular指令.我发现了angular-nvd3指令,支持多图(组合图表类型),但我不认为它支持条形堆叠,只支持分组.

我知道这些问题不太适合SO,我正在寻找任何,一个,lib,而不是建议.(也必须免费用于商业用途)

我已经在互联网上搜索了这个问题的解决方案,但还没有遇到过.我希望这里有人有这方面的经验,可以帮助我指出正确的方向.

我有一个用Angular-nvd3创建的折线图,我正在使用Bootstrap来提供响应.基本上我每行有两个图表.我遇到的问题是,当我第一次加载页面时,图表会被压缩成一个小宽度.我没有在图表上设置宽度,以便它可以继承100%的宽度并填充容器.只要我对浏览器执行任何操作,例如打开控制台或调整浏览器大小,图表就会缩放到正确的宽度.我想知道是否有办法强制调整大小.在使用c3d3之前我遇到了类似的问题,但是使用chart.resize()解决了这个问题.我不知道nvd3是否有类似的方法,因为我对nvd3没有那么多的经验.我想知道是否有类似的方法我可以使用,或者是否有一种纯粹的方法与d3这样做.

以下是一些前后图片,以帮助可视化问题:

之前:

打开控制台或以任何方式调整浏览器大小后,它可以正确缩放:

编辑:我应该补充一点,设置一个固定的宽度可以避开问题但是固有的响应性会消失(在较小的浏览器大小下图形重叠会出现新的问题)

编辑:添加了一些我希望可以帮助的代码片段.我正在使用Bootstrap方式的行和列.我也在JS中声明了图表选项

HTML

<div class="row">
    <div class="col-sm-6">
        <nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
    </div>
    <div class="col-sm-6">
        <nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
    </div>
</div>

JS

$scope.inletOptions = {
    chart: {
        type: 'lineChart',
        height: 300,
        margin : {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
        },
        x: function(d) { return d.x; },
        y: function(d) { return d.y; }
    }
};

我正在使用angular-1.5.8,d3-3.5.17,nvd3-1.8.5和angular-nvd3-1.0.9与Angular Material.我正在尝试将NVD3指令放入$mdDialog.源代码很简单:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar/h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.close()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content>
    <nvd3 options="dialog.options" data="dialog.data"></nvd3>
  </md-dialog-content>

  <md-dialog-actions>
    <md-button ng-click="dialog.close()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

我使用$mdDialog.show()带fullscreen: true.如你所知fullscreen: true,如果浏览器窗口足够小,对话框只会全屏显示.

无论如何,我对类型图表有很多问题scatterChart.这里有几个大的:

• 16点的散点图显示真的非常小!我不想在宽度/高度上进行硬编码.是否有一个NVD3的缩放选项,说"显示你通常会增加的尺寸"？
• 如果我让浏览器(Chrome)足够小,mdDialog会突然弹出全屏!并且NVD3图表动态扩展以填充整个宽度!太酷了!但图表的高度保持不变.现在我有一张宽度很小的宽图表; mdDialog关闭按钮几乎位于屏幕顶部,下方有一个巨大的空白.
• 如果我手动设置<md-dialog-content style="min-width=500px;min-height=300px">只是一个例子,同样的事情发生:NVD3电荷水平扩展以填充宽度,但图表下方,关闭按钮上方有一个巨大的空白区域.

如何让NVD3图表与mdDialog很好地配合,并填充整个对话框内容区域？

是否可以从 D3 时间格式返回本地化信息？

d3.time.format('%B %Y')(new Date(d))

这总是返回 EN 值。

我正在寻找如何修改 NVD3.js 中 X 轴和 Y 轴标签字体的字体大小和属性

该文档似乎没有指出执行此操作的选项。是否可以？