0

を使用してマルチチャートを開発しようとしていangular-nvd3ます。

グラフは正常に動作し、データを取得して必要な値を表示できます。私が今抱えている問題は、特定の値を表示したいのですがx-axis、何らかの理由で表示できないことです。

ここに私がこれまでに持っているものがあります: http://codepen.io/NickHG/pen/rLWNea?editors=1010

チャートのオプションは次のとおりです。

chart: {
   type: 'multiChart',
   height: 450,
   margin: {
      top: 10,
      right: 40,
      bottom: 60,
      left: 30
      },
   useInteractiveGuideline: false,
   transitionDuration: 10,
   style: 'expand',
   tooltip: {
       keyFormatter: function(d, i) {
       return "Test";
       }
     },
   zoom: {
      enabled: true
     },
   xScale: x_scale,
   xAxis: {
     ticks: 14,
     domain: [0, 14],
     axisLabel: '',
     tickFormat: function(d) {
        return d3.time.format('%H:%M')(new Date(d * 1000));
      }
     },
    Axis1: {
        axisLabel: '',
        axisLabelDistance: -100
     }
 }

私が達成しようとしているのは、各時間の X 軸です00:00 to 23:00(これも試しましたが、運がありません: d3.time.scale を使用して、1 日の各時間と各曜日のラベルを作成する方法)

x 軸のアイデアは、時間、日、または週を表示できるようにすることですが、時間の表示方法を正しく理解すれば、別の形式で値を出力する方法を自分で理解できるはずです。 .

助けてくれてありがとう

4

1 に答える 1

0

あなたはほとんどずっとそこにいました。ペンで修正する必要があるのは、6 から 24 までの x 軸の目盛りの数だけです....

nv.addGraph(function() {         
      chart = nv.models.multiChart()    
      chart.margin({"left":5,"right":5,"top":10,"bottom":20})
      chart.showLegend = true
      chart.xAxis
           .scale(xAxisScale())
           .ticks(24)   //--> changed from .ticks(6)
           .tickFormat(d3.time.format("%H:%M"));

更新されたペンを参照してください。乾杯！

于 2016-07-05T14:02:15.710 に答える