1

我有一个multiChartin angular-nvd3，它应该显示每天的销售额和总收入。

<nvd3 options="options" data="data"></nvd3>

这是选项和数据：

$scope.options = {
    chart: {
        type: 'multiChart',
        height: 450,
        margin : {
            top: 30,
            right: 90,
            bottom: 50,
            left: 70
        },
        color: d3.scale.category10().range(),
        useInteractiveGuideline: true,
        xAxis: {
            axisLabel: "Day",
            tickFormat: function(d){
                return d3.time.format('%b %d')(new Date(d));;
            }
        },
        yAxis1: {
            axisLabel: "Orders",
            tickFormat: d3.format('d')
        },
        yAxis2: {
            axisLabel: "Income (Lari)",
            tickFormat: function(d){
                return Math.round(d / 100) + " GEL";
            }
        }
    }
};
$scope.data = [{
    yAxis: 2,
    type: 'line',
    key: "Income",
    values: data.map(function (item) {
        return {
            series: 0,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item.total
        };
    })
},
{
    yAxis: 1,
    key: "Orders",
    type: 'line',
    values: data.map(function (item) {
        return {
            series: 1,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item.count
        };
    })
}];

转换前的数据项：

{
  "_id": {
    "year": 2015,
    "month": 11,
    "day": 26
  },
  "total": 1078,
  "count": 1
},

悬停第一行显示工具提示，显示 Y 值，但第二行在鼠标悬停时完全被忽略。禁用第一行会在控制台中显示以下错误：

d3.js:5948 Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
d3.transform @ d3.js:5948d3
interpolateTransform @ d3.js:6049
(anonymous function) @ d3.js:8754
(anonymous function) @ d3.js:8945
d3_class.forEach @ d3.js:341
start @ d3.js:8944
schedule @ d3.js:8912
d3_timer_mark @ d3.js:2165
d3_timer_step @ d3.js:2146

并导致窗口水平溢出，这是因为工具提示显示的偏移量很大。极度缩小时可以观察到。

4

1 回答 1

0

我无法在 plunker 中完全重现您的问题，但我采用了您的示例数据对象并在我自己的 plunker 中创建了几个额外的数据点。工具提示功能在这个 plunker 中运行良好，我认为它必须与您如何将值映射到$scope.data对象有关。

我采用创建外部函数的方法将值构建到$scope.data数组中：

function mapValues(src, dest, series, key) {
    dest[series].values = src.map(function(item) {
        return {
            series: series,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item[key]
        };
    })
}

然后使用您指定的参数调用该函数：

$scope.data = [{
    yAxis: 2,
    type: 'line',
    key: "Income"
},
{
    yAxis: 1,
    key: "Orders",
    type: 'line'
}];

mapValues(json, $scope.data, 0, 'total');
mapValues(json, $scope.data, 1, 'count');

无论如何，现在可能为时已晚，但我只是想我会向可能遇到此问题的其他人提供这种创建数据对象的方法。

于 2016-02-27T05:53:03.417 回答