nvd3.js - 带有 "Duplicate Labels"的 NVD3 不同栏

标签 nvd3.js

我们的 Distinct Bar Chart 上的 xaxis 是用户名。我遇到的问题是可能有多个用户具有相同的名称。

我希望 x 轴与用户的 id 不同,但希望标签是用户的姓名(是的,我知道名称不明确,但这对我们的目的来说是可以的)

鉴于以下数据,我将如何使 x 轴与 id 不同,但显示标签值

[{
    "key" : "tester",
    "values" : [{
        "value" : 5.0,
        "label" : "John Smith",
        "color" : "#9BA474",
        "id" : 1388
    }, {
        "value" : 10.25,
        "label" : "Jane D'oh",
        "color" : "#356AA0",
        "id" : 11
    }, {
        "value" : 3.5,
        "label" : "John Smith",
        "color" : "red",
        "id" : 12
    }]
}]

最佳答案

我可能有我自己的问题的答案。如果有其他方法可以做到这一点,我想听听他们的意见。

var chart = nv.models.discreteBarChart()
        .x(function(d, i) { return i })
        .y(function(d) { return d.value });

chart.xAxis
        .tickFormat(function(d) {return data[0].values[d].label; });

关于nvd3.js - 带有 "Duplicate Labels"的 NVD3 不同栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18315188/

相关文章:

javascript - 在 Angular nvd3 折线图中显示当前时间

javascript - 在 discreteBarChart nvd3.js 中使用数据自定义工具提示的工具提示内容

javascript - NVD3 强制条形图中条形的特定宽度

javascript - nvd3 - 如果 xAxis 可见,则无法显示 XAxis(false)

javascript - 如何访问 nvd3 中 d3 图的 x 和 y 尺度?

nvd3.js - NVD3 - lineWithFocusChart - 禁用 x 轴标签/刻度的自动排序

javascript - NVD3 图表(折线图)的交互指南在 12 列网格(Bootstrap)中被剪切我绘制两个图表

d3.js - 对于大数据集和慢速网络,如何增加读取 d3.json 数据的时间?

javascript - 如何使用 d3.js 添加按钮表列?

javascript - nvd3折线图问题