NVD3时间格式，线与焦点图

NVD3 time formatting , line with focus chart

本文关键字：焦点 时间 格式 NVD3      更新时间：2023-09-26

我正在使用一个相当简单的带有焦点图的 nvd3 线示例。 myData从我的 php 文件中返回一个 JSON 对象，其中 x cordinate 是 0-23 之间的数字。我想知道如何以小时格式格式化 x 轴。

 d3.json('get_data.php', function (error, myData) {
  // Renders a line chart
  (function () {
      nv.addGraph(function () {  
          var chart = nv.models.lineWithFocusChart();
          chart.xAxis                
            .tickFormat(d3.format(''));
          chart.yAxis
            .tickFormat(d3.format(''));
          chart.y2Axis
            .tickFormat(d3.format(''));
          d3.select("#chart svg")               
              .datum(myData)
              .transition().duration(500)
              .call(chart);    //Define transition and pass the d3.selection to our lineChart.

          nv.utils.windowResize(chart.update);
          return chart;   //Must return the enclosed chart variable so the global rendering queue can store it.
          //});
      });
  })();  });

以下是 myData 中的示例 json 数据。我是否需要操纵它？

[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }]任何帮助，不胜感激。

跟随对

我不起作用。chart.lines.xScale（d3.time.scale（））;chart.lines2.xScale（d3.time.scale（））;

在最新的 nvd3 中，您必须使用以下方法来更新 xScale。chart.xScale（d3.time.scale（））;chart.focus.xScale（d3.time.scale（））;

希望它对某人有所帮助。

经过大量搜索，它可以使用此代码。

chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());

var tickMultiFormat = d3.time.format.multi([ ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour ["%-I%p", function(d) { return d.getHours(); }], // not midnight ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st ["%Y", function() { return true; }] ]);

chart.xAxis.tickFormat(function (d) { return tickMultiFormat(new Date(d)); });

也是我对角度版本的解决方案：

var tickMultiFormat = d3.time.format.multi([
            ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour
            ["%-I%p", function(d) { return d.getHours(); }], // not midnight
            ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month
            ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st
            ["%Y", function() { return true; }]
        ]);

$scope.fraud_cases_area_options = {
            chart: {
                type: 'lineWithFocusChart',
                height: 300,
                noData: $scope.noDataMessage || 'No Data Available.',
                margin: {
                    top: 20,
                    right: 20,
                    bottom: 30,
                    left: 40
                },
                color: ['#d62728', '#5DB56A', '#9E9E9E', '#aec7e8'],
                x: function (d) {
                    "use strict";
                    return d[0];
                },
                y: function (d) {
                    "use strict";
                    return d[1];
                },
                xScale: d3.time.scale(),
                focus: {
                    xScale: d3.time.scale(),
                },
                useVoronoi: false,
                clipEdge: true,
                duration: 100,
                useInteractiveGuideline: true,
                showControls: false,
                showTotalInTooltip: true,
                xAxis: {
                    showMaxMin: false,
                    tickFormat: function (d) { return tickMultiFormat(new Date(d)); }
                    /*function (d) {
                        "use strict";
                        return d3.time.format("%d.%m.%Y")(new Date(d))
                    }*/,
                },
                x2Axis: {
                    showMaxMin: false,
                    tickFormat: /*function (d) { return tickMultiFormat(new Date(d)); }*/
                    function (d) {
                     "use strict";
                     return d3.time.format("%d.%m.%Y")(new Date(d))
                     },
                },
                yAxis: {
                    tickFormat: function (d) {
                        "use strict";
                        // console.log("error",d3.format(',.2f')(d));
                        return d3.format(',.0f')(d);
                    }
                },
                zoom: {
                    enabled: false,
                    scaleExtent: [1, 10],
                    useFixedDomain: false,
                    useNiceScale: false,
                    horizontalOff: false,
                    verticalOff: true,
                    unzoomEventType: 'dblclick.zoom'
                },
                interactiveLayer: {
                    "tooltip": {
                        "duration": 0,
                        "gravity": "w",
                        "distance": 25,
                        "snapDistance": 0,
                        "classes": null,
                        "chartContainer": null,
                        "enabled": true,
                        "hideDelay": 0,
                        "fixedTop": null,
                        "headerEnabled": true,
                        "headerFormatter": function (d) {
                            return 'at ' + d3.time.format("%-I:%M%p")(new Date(d));
                        },
                        "hidden": true,
                        "data": null,
                    },
                    "margin": {
                        "left": 0,
                        "top": 0
                    },
                    "width": null,
                    "height": null,
                    "showGuideLine": true,
                    "svgContainer": null
                },
            }
        }
相关文章：