在 x 轴上带有字符串值的 nvd3 折线图答案

【问题标题】：nvd3 line chart with string values on x-axis在 x 轴上带有字符串值的 nvd3 折线图
【发布时间】：2014-07-06 19:35:06
【问题描述】：

我是 nvd3 图表的新手。我需要一个折线图，x 轴上有字符串值图表应该是这样的Bar Chart，但我需要一条线，而不是条形

我的结果看起来像这样Line Chart 这些值都映射到 x=0

我的代码

nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .useInteractiveGuideline(true) 
    .transitionDuration(350)
    .x(function(d) { return d.x}) 
    .y(function(d) { return d.y}) 
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);

    chart.xAxis.tickValues(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]);

    d3.select(element + ' svg')
    .datum(data) 
    .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

还有我的数据

[{"color":"#a215af","key":"products","values":[
    {"label":"Monday","y":0,"x":"Monday"},
    {"label":"Tuesday","y":0,"x":"Tuesday"},
    {"label":"Wednesday","y":1,"x":"Wednesday"},
    {"label":"Thursday","y":6,"x":"Thursday"},
    {"label":"Friday","y":2,"x":"Friday"},
    {"label":"Saturday","y":0,"x":"Saturday"},
    {"label":"Sunday","y":13,"x":"Sunday"}]}]

我尝试了很多，但不知道该怎么做。

任何帮助或建议都会很棒

解决方案 就像 dcclassics 提到的那样，我用数值而不是字符串然后使用tickValues和tickFormat：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});

【问题讨论】：

如果我没记错的话，如果将 X 轴值更改为数字会发生什么？ (1-7) 而不是天？标签不会告诉它在哪里绘制数据，它需要知道数据的值。
谢谢！使用数字它可以工作Chart 但我需要字符串值。有没有办法将标签映射到数字？使用 scale.ordinal 或类似的东西？
我找到了解决方案并更新了问题！谢谢 dcclassics！
请为您自己的问题创建一个答案并标记为接受者。

标签： d3.js nvd3.js

【解决方案1】：

工作解决方案：

var data = [{"color":"#a215af","key":"products","values":[
    {"y":0,"x":0},
    {"y":0,"x":1},
    {"y":1,"x":2},
    {"y":6,"x":3},
    {"y":2,"x":4},
    {"y":0,"x":5},
    {"y":13,"x":6}]}] 

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true) 
    .transitionDuration(350)
    .x(function(d) { return d.x}) 
    .y(function(d) { return d.y}) 
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);

  var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

  chart.xAxis
    .tickValues([0, 1, 2, 3, 4, 5, 6])
    .tickFormat(function(d){
      return days[d]
    });

  d3.select(element + ' svg')
    .datum(data) 
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

【讨论】：

【解决方案2】：

就像提到的 dcclassics 一样，我使用数值而不是字符串，然后使用了 tickValues 和 tickFormat：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});

这个解决方案对我有用

【讨论】：