当在 C3 图中加载多个单点 X 轴值时，如何克服 X 轴样式问题？答案

【问题标题】：How to overcome x-axis styling problems when multiple X-axis Values with single point to load in C3 graph?当在 C3 图中加载多个单点 X 轴值时，如何克服 X 轴样式问题？
【发布时间】：2020-07-27 13:53:21
【问题描述】：

C3 版本：0.7.12
D3 版本：5.15.0
浏览器：Chrome
操作系统：MAC

代码笔link

var chart = c3.generate({
      bindto: '#c3',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-10'],
            ['sample', 30]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                // this also works for non timeseries data
                values: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04','2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12','2013-01-13', '2013-01-14', '2013-01-15']
            }
        }
    }
      });

当您有多个 x 轴刻度值并且在以时间戳重叠结尾的图表上加载单个点时。

如果您在同一个图表中加载多个点，则不会出现此问题。当您首先有单点一段时间，然后在一段时间后加载第二个点时如何解决这个问题？

【问题讨论】：

标签： javascript css d3.js c3.js

【解决方案1】：

您可以通过删除 x 轴的刻度值并用格式替换它们来解决这个问题（您已经在 x 数据中定义了日期）：

axis: {
      x: {
           type: 'timeseries',
           tick: {
              format: '%Y-%m-%d'
           }
       }
}

请查看下面的可执行文件 sn-p。我添加了一个超时功能进行演示。

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ["x", "2013-01-10"],
          ["sample", 30]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2015-01-09', '2015-01-10', '2015-01-11'],
            ['sample', 20, 30, 45],
        ],
        duration: 50,
    });
}, 3500);

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

如果您已经想在只有一个数据点的情况下在开始时将所有时间显示为 x 轴上的刻度，您可以在数据字符串中添加“null”：

data: {
    x: 'x',
    columns: [
        ['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
        ['sample', null, 30, null, null]
    ]
}

在可执行的sn-p下面：

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
          ['sample', null, 30, null, null]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
            ['sample', 20, 30, 15, 25],
        ],
        duration: 50,
    });
}, 3500);

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

【讨论】：