Question

我在名为csv的{{1}}文件中包含以下数据：

BarData.csv

以下Fruit,dt,amount Apple,12/28/2016,-1256 Apple,12/29/2016,-500 Apple,12/30/2016,3694 Apple,12/31/2016,5586 Apple,1/1/2017,4558 Apple,1/2/2017,6696 Apple,1/3/2017,7757 Apple,1/4/2017,8528 Apple,1/5/2017,5543 Apple,1/6/2017,3363 Apple,1/7/2017,5464 Pear,12/25/2017,250 Pear,12/26/2017,669 Pear,12/27/2017,441 Pear,12/28/2017,159 Pear,12/29/2017,357 Pear,12/30/2017,775 Pear,12/31/2017,669，html和css位于一个javascript文件中：

.html

当所有数据都是正数时，一切都很好 - 但是当一些数据是负数时，我们可以在这个plunker演示中看到结果：

http://plnkr.co/edit/1hudJYkRq2MnuIlwxXZi?p=preview

如何修改代码，以便： - 显示负条？ - 当包含负数时，正条的基数垂直向上移动？ - 垂直运动也包含在过渡中？

以上是一个以上的问题，但对任何问题都有所帮助。

Answer 1

关键是要使用条形的y和height属性来正确定位它们。

对于y，请将其更改为：

  y: function(d) {
          return yScale(Math.max(0, d.amount));
        },

对于height，请将其更改为：

height: function(d) {
              return Math.abs(yScale(d.amount) - yScale(0));
            },

然后，您可以设置负条的样式，使它们成为不同的颜色。

检查更新后的Plunkr - http://plnkr.co/edit/q7dQsPW0PiPuwFTy8gLN?p=preview

修改：

对于着色部件，如果您想减少线条并希望更简单，可以使用1个衬垫实现它。

而不是：

  fill: function(d) {
                var col = colorChosen
                if (d.amount < 0) {
                    col = "#FF0000";
                }
                return col;
            },
  });

你可以这样做：

  fill: function(d) {
                        return d.amount < 0 ? "#FF0000" : colorChosen;
                    },

条形图考虑负值

1 个答案: