如何在非丑陋模式下在 X 轴上绘制时间? [英] How to plot time on the X-axis in non-ugly mode?

问题描述

这很丑:

我需要不难看的东西.时间序列很常见，但我不知道如何使用 ISO 日期构建即插即用"图表.

也许一个等效的问题是"如何使用

var chart = nv.models.discreteBarChart().x(d=>d.label).y(d=>d.value).staggerLabels(true);图表.xAxis.showMaxMin(假).tickFormat(函数(d){让 dd = 新日期(d)返回 (dd.getDay()==1)?d3.time.format('%x')(aux): '';});//每 7 天格式，否则为空字符串

<小时>

另一种解决方案，http://jsfiddle.net/ee2todev/3Lu46oqg/看起来很好很优雅，使用 d3.scale.ordinal().domain(valuesForXAxis).rangePoints([0,width])，但不是 NVD3，是纯 D3...

<小时>

NVD3 Live Line Plus Bar Chart 似乎很好(！)，但是输入数据不是 ISO 日期，是不是很奇怪(unix 时间?)它是一个序数域并且使用非丑陋算法自动显示.

解决方案

您可以尝试使用可以在 x 轴上显示时间序列的 historyBarChart.

 var chart = nv.models.historicalBarChart().x(function(d) { return d[0]}).y(function(d) { return d[1]}).useInteractiveGuideline(true);...图表.xAxis.showMaxMin(假).tickFormat(函数(d){return d3.time.format('%x')(new Date(d))});

工作示例是这里.

This is ugly:

I need something that is not ugly. Time series are very usual, but I not see how to build a "plug and play" chart with ISO dates.

Perhaps an equivalent question is "How to use d3-scalelinear/Non-numeric range/Date with NVD3?"
(or d3-scaletime)

---

Notes

This is the main code:

    nv.addGraph(function () {

        var chart = nv.models.discreteBarChart()
          //.x( d=> d.label )  // very Ugly!
          .x( d=> { 
                let dd = new Date(d.label); 
                return d3.time.format('%b %d')(dd)  
           })  // Ugly, because need to jump some days before show next
          .y( d=> d.value )
          .staggerLabels(true) // not solved

        d3.select('#chart svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);

        nv.utils.windowResize(chart.update); // necessary?

        return chart;
    }); // \nv.add

I try some variations, no one work fine (all ugly).

My data is something as

    [ {  
      key: "ExampleData",
      color: "#ff7f0e",  
      values: [
         { label: "2019-03-28", value: 7.8389242307 },
         { label: "2019-03-29", value: 9.4185632435 },
         { label: "2019-03-30", value: 7.3553138346 },
         { label: "...", value: ... }
      ]
    } ];

​​ The values Array have ~100 items.

---

Problematic workarounds

This (not elegant) solution loss the tooltip, as illustrated,

var chart = nv.models.discreteBarChart()
   .x( d=> d.label )
   .y( d=> d.value )
   .staggerLabels(true);
chart.xAxis
  .showMaxMin(false)
  .tickFormat(function(d) {
    let dd =  new Date(d)
    return (dd.getDay()==1)? d3.time.format('%x')(aux): '';
  });  // each 7 days format, else empty string

---

This other solution, http://jsfiddle.net/ee2todev/3Lu46oqg/ seems good and elegant, using d3.scale.ordinal().domain(valuesForXAxis).rangePoints([0,width]), but is not NVD3, is pure D3...

---

The NVD3 Live Line Plus Bar Chart seems good (!), but the input data is not ISO date, is something very strange (unix time?) that is a ordinal domain and is automatically displayed with non-ugly algorithm.

解决方案

You can try using historicalBarChart which can have time series on x axis.

  var chart = nv.models.historicalBarChart()
   .x(function(d) { return d[0]})
   .y(function(d) { return d[1]})
   .useInteractiveGuideline(true);

  ...

  chart.xAxis
    .showMaxMin(false)
    .tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    });

Working example is here.

这篇关于如何在非丑陋模式下在 X 轴上绘制时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！