0

小さなチャートのXTickフォーマットを日付にも変更したいと思います。私はこの例から持ち上げられた次のものを持っています:

function chart(div)
{
var testdata = loadData();
nv.addGraph(function() {

    var chart = nv.models.lineWithFocusChart();

    chart.xAxis.tickFormat(function(d) {
       var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
       return d3.time.format('%x')(new Date(dx))
     });

    chart.yAxis
        .tickFormat(d3.format(',.2f'));

   chart.y2Axis
       .tickFormat(d3.format(',.2f'));

   d3.select(div + ' svg')
       .datum(loadData())
     .transition().duration(500)
       .call(chart);

   nv.utils.windowResize(chart.update);

   return chart;
 });
 }

ただし、現在までに変更されるのは大きなグラフの形式のみです。

4

1 に答える 1

1

2番目のx軸の目盛りを修正する方法は2つあります。

最初の方法はtickFormat、2番目の軸にも明示的に設定することです。この設計は、一度に1つの属性を設定するという従来のパラダイムに従います。

var xFormat = function(d) {
   var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
   return d3.time.format('%x')(new Date(dx));
};

chart.xAxis.tickFormat(xFormat);
chart.xAxis2.tickFormat(xFormat);

chartコードの重複を回避する2番目の方法は、 APIによって公開される特別な関数を使用して両方の軸を一緒に設定することです。

// This would set both the axis simultaneously
chart.xTickFormat(xFormat);

この関数は、まさにこの目的のためにコード(ここで紹介)に存在します。ただし、APIはあまり安定していないため、後で削除される可能性があります。

于 2013-01-28T23:26:27.623 に答える