时间戳

首页 > 解决方案 > 当在 C3 图中加载多个单点 X 轴值时，如何克服 X 轴样式问题？

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

问题描述

代码笔链接

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 轴刻度值并且在以时间戳重叠结束的图表上加载单个点时。

屏幕截图 2020-04-02 上午 10 点 29 分 51 秒

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

标签： javascriptcssd3.jsc3.js

解决方案

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

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

请查看下面的可执行代码段。我添加了一个超时功能进行演示。

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]
    ]
}

在可执行代码段下方：

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>

推荐阅读