Question

我有时间序列数据。在服务器上，我生成一个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'
          }
      }
  }

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

Answer 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将在这些日期之间显示时间。

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

1 个答案: