Question

我正在尝试在折线图的x轴上放置一个字符串，最初x轴是一个日期变量，但是现在我必须添加一个字符串来区分我，如果它是上午“ AM”，下午“ PM”或晚上的“ ZM”。我正在将nvd3 v1.8.1与angularjs一起使用。初始代码如下

tchart.xAxis
    // Chart x-axis settings
    .axisLabel('Muestras')
    .tickFormat( function(d){
                        return d3.time.format('%y-%m-%d %p')
                                    (Utils.utcDateToLocalDate(d))
                    });

        chart.xScale(d3.time.scale.utc());
        tchart.yAxis // Chart y-axis settings
        .axisLabel('Temperatura').tickFormat(
        d3.format('.02f'));

        var tdata = getData('temperatura');

        d3.select('#temperatureChart svg').datum(tdata).call(tchart);


        var getData = function(_prop) {
                var _data = [];

                $scope.registros.forEach(function(_item, _index) {
                        var _cfecha = _item.fecha.split('-');
                        var _fecha = new Date(Date.UTC(
                                    parseInt(_cfecha[0]),
                                    parseInt(_cfecha[1]),
                                    parseInt(_cfecha[2]),
                                    (_item.horario === 'AM') ? 1: 13,0, 0));
                        _data.push({
                            x : _fecha,
                            y : _item[_prop]
                        });
                });

                return [ {
                    values : _data,
                    key : _prop,
                    color : '#ff7f0e'
                } ];
    };

获得图的结果。

Result1

然后我在数据中增加了一个'label'变量以使其以粗格式使用，但并不是所有的值都在图表2中显示

//fill data array
_data.push({
    x : _fecha,
    y : _item[_prop],
    label : _lfecha
});

//tchar.xAxis
.tickFormat(function(d,i) { 
    return tdata[0].values[i].label;
}

graph2

我还使用了具有数据矩阵值的序数标度，但仅显示开始日期和结束日期，其他值被省略了（图3）

var x = d3.extent(tdata[0].values, function(d) { console.log(d); return d.label; });

tchart.xScale(d3.scale.ordinal().domain(x));

grahp3

我期望的结果与第一个图形相同，但是轴标签允许我用缩写AM-PM-ZM连接日期

如何在折线图d3.js v3.5.6的x轴上使用字符串值

0 个答案: