堆积的条形图无法正确渲染并覆盖条形

时间:2017-03-01 14:54:29

标签: angularjs nvd3.js angular-nvd3

我正在尝试使用angular-nvd3绘制堆积条形图,遵循this示例。我使用multiBarChart作为图表类型。输出如下:

enter image description here

条形图重叠,而条形图总高度以及鼠标悬停时显示的值是正确的。每个条形的值对应于标签中显示的数字(label_9:三个条形,每条高度为9,相当于27)。橙色条覆盖其他条,而不是从值18开始。

以下是我的图表选项:

$scope.options = {
    chart: {
        type: "multiBarChart",
        height: 450,
        margin: {
            top: 20,
            right: 20,
            bottom: 45,
            left: 45
        },
        clipEdge: true,
        duration: 500,
        stacked: true,
        reduceXTicks: false,
        xAxis: {
            "axisLabel": "Time (ms)",
            "showMaxMin": false
        },
        yAxis: {
            "axisLabel": "Y Axis",
            "axisLabelDistance": -20
        }
    }
};
  1. 我错过了什么,可能是什么原因?
  2. 深入研究这个问题的合适步骤是什么?
  3. 注意:我使用文字标签而不是数字。当我使用数字时,问题是相同的,如示例中所示。分组模式运行良好。

1 个答案:

答案 0 :(得分:0)

我找到了问题并在此发布,以防其他人认为有用:我的值是字符串,而不是数字,即“9”而不是9。