Question

multiChart中有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

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

Answer 1

我无法在一个plunker中完全重现您的问题，但我采用了您的示例数据对象并在plunker of my own中创建了一些额外的数据点。工具提示功能在这个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');

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

工具提示无法在NVD3 MultiChart的第二行上运行

1 个答案: