如何将键/值传递给具有自动时间序列 x 轴的多线 C3.JS 图表？答案

【问题标题】：How to pass key/values to multi-line C3.JS Chart with automated timeseries x-axis?如何将键/值传递给具有自动时间序列 x 轴的多线 C3.JS 图表？
【发布时间】：2016-01-23 03:29:38
【问题描述】：

我有时间序列数据。在服务器上，我生成了一个 x 数组和三个值数组（长度相同）。

但是，x 数组并不总是按月计算。有时它会跳过几个月。发生这种情况时，x 轴的间距非常大。有没有一种好方法可以在 x 轴上生成标签范围，并为不同的线条传递键值，以便整个线条的值仍然在图表中表示。

目前我有：

  var chart = c3.generate({
       bindto: "#" + this.chart.chartId,
       data: {
          x: 'x',
          columns: [
              ["x", "2015-01-01", "2015-02-01, "2015-06-01", "2016-01-01"],
              ["data1", 5, 8, 2, 9]
              ["data2", 3, 10, 2, 1]
              ["data3", 1, 8, 4, 9]
       },
       subchart: {
          show: true
       },
       axis: {
       x: {
          type: 'timeseries',
          extent: ['2015-01-01', '2016-01-01'],
             tick: {
             format: '%Y-%m-%d'
          }
      }
  }

}); 任何建议都可以解决时间序列的这个间隔问题。

【问题讨论】：

标签： d3.js c3.js

【解决方案1】：

您似乎在询问有关使用 c3 寻址 x 轴的问题，但您的标签表明您对使用 D3 的解决方案持开放态度。查看您的 JSON 字符串并查看节点 x.extent 我建议尝试这样的操作：

// setup x axes
var minDate = yourJSON.x.extent[0], maxDate = yourJSON.x.extent[1],
xScale = d3.time.scale().domain([maxDate,maxDate]).range([0, width]),
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.time.format("%Y-%m-%d"));

var svg = d3.select("#chart-content").append("svg")...etc;

        // x-axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("class", "label")
            .attr("x", width)
            .attr("y", -6)
            .style("text-anchor", "end");

由于您指定了一个范围，D3 将显示这些日期之间的时间。

【讨论】：

感谢您的信息。我试试看。