如何在dc.js柱状图X轴使用本地化法语月份

我来帮你搞定这个X轴本地化的问题！你的需求是显示法语月份名称且仅显示月份，我检查了你的代码，发现几个关键调整点，按下面的步骤修改就能正常运行了：

1. 修正本地化配置的拼写错误 #

你的localeFrance里有两个月份拼写错误，这会导致显示异常：

• Septembrr → Septembre
• Decembre → Décembre（加上重音符号更符合法语规范）

2. 创建匹配UTC时间的本地化格式化函数 #

因为你的日期是用d3.time.format.utc解析的UTC时间，所以需要用本地化配置的utcFormat方法创建格式化函数，确保时区一致：

// 生成完整法语月份名称的格式化函数（如果想用短名称，把"%B"换成"%b"）
var monthFormat = localeFrance.utcFormat("%B");

3. 配置X轴的刻度格式 #

在柱状图的配置中，给X轴指定我们刚创建的格式化函数，替换默认的日期显示：

timeChart.xAxis().tickFormat(monthFormat);

4. 保持正确的xUnits设置 #

你之前注释掉的.xUnits(localeFrance.timeFormat("%b"))是错误的，xUnits需要传入时间间隔函数（比如d3.time.months或d3.time.months.utc），用来确定柱子的数量和宽度，保持原来的.xUnits(d3.time.months)即可（如果要严格匹配UTC，也可以换成d3.time.months.utc）。

完整修正后的代码 #

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Dashboard</title>
  <link rel="stylesheet" href="dc.css">
</head>
<body>
  <div id=chart> here </div>
  <script src="crossfilter.js"></script>
  <script src="d3.js"></script>
  <script src="dc.js"></script>
  <script>
    var localeFrance = d3.locale ({
      "decimal": "",
      "thousands": "",
      "grouping": [3],
      "currency": ["€ ", ""],
      "dateTime": "%a %b %e %X %Y",
      "date": "%d/%m/%Y",
      "time": "%H:%M:%S",
      "periods": ["AM", "PM"],
      "days": ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
      "shortDays": ["lun", "mar", "mer", "jeu", "ven", "sa", "dim"],
      "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
      "shortMonths": ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Juil", "Aou", "Sep", "Oct", "Nov", "Dec"]
    });

    var dateFormat_in = d3.time.format.utc("%Y-%m-%d");
    data=[{year:2017, month:1, value:12},{year:2017, month:2, value:15},{year:2017, month:3, value:12},
          {year:2017, month:4, value:16},{year:2017, month:5, value:14}]

    data.forEach(function(d) {
      d["date"] = dateFormat_in.parse(d["year"]+"-"+d["month"]+"-01");
      d["value"] = +d["value"];
    });

    ndx = crossfilter(data);
    timeChart = dc.barChart("#chart");

    monthDim = ndx.dimension(d => d3.time.month.utc(d["date"]));
    monthGroup = monthDim.group().reduceSum(d=>d.value);

    minDate = monthDim.bottom(1)[0]["date"];
    maxDate = monthDim.top(1)[0]["date"];

    // 生成法语月份格式化函数（完整名称）
    var monthFormat = localeFrance.utcFormat("%B");

    timeChart
      .width(480)
      .height(320)
      .margins({top: 5, right: 30, bottom: 20, left: 50})
      .dimension(monthDim)
      .group(monthGroup)
      .x(d3.time.scale().domain([minDate, maxDate]))
      .xUnits(d3.time.months)
      .elasticY(true)
      .centerBar(true)
      .xAxisPadding(15)
      .xAxisPaddingUnit('month')
      .gap(16)
      .yAxis().ticks(1);

    // 设置X轴的刻度格式为法语月份
    timeChart.xAxis().tickFormat(monthFormat);

    dc.renderAll();
  </script>
</body>

这样修改后，你的柱状图X轴就会显示完整的法语月份名称，且仅展示月份啦！如果想要短月份名称，只需要把%B换成%b即可，对应你localeFrance里的shortMonths配置。

内容的提问来源于stack exchange，提问作者François