DC.JS / D3 Xaxis在LineChart中显示和订购月名

发布于 2025-02-13 13:32:19 字数 1137 浏览 1 评论 0原文

您好，我有一个关于DC/D3的问题，我想在Xaxis上显示Januar的Xaxis，直到12月（按正确的顺序）该价值应每年总和（我的意思是在一月舒适为2020年至2022年的价值 - 只有一个Januar）

以下代码适合条件，因为X的重新订购以这种方式可以正常工作，但是线路都可以。图表我得到了一个有趣的图表。

function Dimension() {
    return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
    
function Group(thisDim) {
    var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
    return thisVal;
}

var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
                .title(function (d) {   return d.key; })
                .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
                .label(function (d) {  return d.key;})
                .margins({top: 10, right: 10, bottom: 30, left: 70})
                .elasticY(true)
                ;
for (var i=0;i<12;i++) x.push(moment.localeData()._months[i]);
    chartObject.x(d3.scaleBand().domain(x)).xUnits(dc.units.ordinal);

这是一个简单的代码（我希望我已经放入）

这是图表的屏幕截图：

原文

Hello i have a question about dc/d3, i would like to show on the xAxis the monthname, Januar till December (in correct order)
The Value should be sum up for each year (i mean on January shoud be the Values from Year 2020 till 2022 - only one Januar)

the following code works fine for Bars because the reorder of the x in this way works fine, but for line chart i get a funny chart.

function Dimension() {
    return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
    
function Group(thisDim) {
    var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
    return thisVal;
}

var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
                .title(function (d) {   return d.key; })
                .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
                .label(function (d) {  return d.key;})
                .margins({top: 10, right: 10, bottom: 30, left: 70})
                .elasticY(true)
                ;
for (var i=0;i<12;i++) x.push(moment.localeData()._months[i]);
    chartObject.x(d3.scaleBand().domain(x)).xUnits(dc.units.ordinal);

This is a simple code (i hope i have put all in)

Here is a screenshot of the chart: