Question

c3步骤图显示垂直线。使用条形图绘制时是否可以仅显示水平线。此外，对于图表中的第一个和最后一个条形，步骤图从中心开始。是否有可能从开始吧开始。

Answer 1

这是一个小小的hackery。如果您使用的是最新版本的c3，则可以重新定义d3步进线生成器以禁止垂直：

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script>
  
    function Step(context, t) {
      this._context = context;
      this._t = t;
    }

    Step.prototype = {
      areaStart: function() {
        this._line = 0;
      },
      areaEnd: function() {
        this._line = NaN;
      },
      lineStart: function() {
        this._x = this._y = NaN;
        this._point = 0;
      },
      lineEnd: function() {
        if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);
        if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
        if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;
      },
      point: function(x, y) {
        x = +x, y = +y;
        switch (this._point) {
          case 0:
            this._point = 1;
            this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
            break;
          case 1:
            this._point = 2; // proceed
          default:
            {
              if (this._t <= 0) {
                this._context.lineTo(this._x, y);
                this._context.lineTo(x, y);
              } else {
                var x1 = this._x * (1 - this._t) + x * this._t;
                this._context.lineTo(x1, this._y);
                this._context.moveTo(x1, y);
              }
              break;
            }
        }
        this._x = x, this._y = y;
      }
    };

    d3.curveStep = function(context) {
      return new Step(context, 0.5);
    };

    var data1 = ['data1'],
      data2 = ['data2'];
    d3.range(5).forEach(function(d) {
      data1.push(Math.random() * 100);
      data2.push(Math.random() * 100);
    })

    var chart = c3.generate({
      data: {
        columns: [
          data1, data2
        ],
        types: {
          data1: 'bar',
          data2: 'step'
        }
      }
    });
  </script>
</body>

</html>

Answer 2

垂直线： 我担心这是不可能的，因为步骤图是由单个SVG路径绘制的。
从中心开始的步骤： 您必须正在寻找line.step.type选项，但不幸的是，它在最新版本中显示已损坏（请参阅此处的回答和评论： c3 step chart align on event）

从c3步骤图中删除垂直线

2 个答案: