Node.js 地图集和人力车

我正在尝试使用atlasboard和人力车创建仪表板。现在发生的是atlasboard默认为黑色背景，在创建图形时我无法看到x轴和y轴（例如WIKI markdown analytics）

如果您从官方的atlasboard页面查看下面的示例屏幕截图，似乎atlassian开发人员已经成功地将x轴显示为白色，因此我想知道：

• 他们是怎么做到的，因为我无法用人力车做到这一点 显然

• 是否有任何css需要重写，或者是否存在任何类型的css 要在nodejs中设置的设置

• 或者甚至应该使用其他图形框架，而不是人力车 （如何做到这一点）

有人能解释一下吗

（来源：）

更新1以下答案：

我在小部件中添加了以下内容：

widget = {
//runs when we receive data from the job
onData: function(el, data) {

       function drawDashLine(val, max, min) {

        var container = $('.content', el),
            viewport = {
                height: container.height(),
                width: container.width()
            },
            topPosition = (viewport.height - Math.ceil(val/max * viewport.height));

        var dashedLineLine = $('<hr />')
            .attr('class', 'dashedLine')
            .css({
                width: el.width() - 40,
                top: topPosition + 'px'
            });

        var lineLabel = $("<span />")
            .attr('class', 'lineLabel')
            .css({
                top: topPosition + 'px'
            })
            .text(val);

        container.append(dashedLineLine, lineLabel);
    }

    function paintMinMax(series) {

        var mergedData = [];

        for (var i = series.length - 1; i >= 0; i--) {
            mergedData = mergedData.concat(series[i].data);
        };

        var min = _.min(_.pluck(mergedData, 'y')),
            max = _.max(_.pluck(mergedData, 'y')),
            mid = Math.round(max / 2);

        drawDashLine(min, max, min);
        drawDashLine(mid, max, min);
        drawDashLine(max, max, min);
    }

    function paintTimeMark(chartWidth, chartHeight, startDate, endDate, timeMarkData) {

        if (!timeMarkData || !timeMarkData.length) {
            return;
        }

        var chartLengthMs = endDate - startDate;

        for (var i = 0, l = timeMarkData.length; i < l; i++) {

            var timeMark = timeMarkData[i];

            // are we in the boundaries?
            if ((timeMark.epoch < startDate) || (timeMark.epoch > endDate)){
                continue; // out of boundaries
            }

            var lengthOfTimemark = timeMark.epoch - startDate;

            var percentage = (lengthOfTimemark / chartLengthMs);

            var leftPosition = Math.round(chartWidth * percentage);

            var top = timeMark.top || 0;
            var markHeight = chartHeight - top;
            var color = timeMark.color || 'orange';

            var mark = $('<div>')
              .attr('class', 'mark')
              .css({
                  left: leftPosition + 'px',
                  'margin-top': top + 'px',
                  'background-color' : color,
                  'height': markHeight + 'px'
              });


            var legend = $('<span>')
              .attr('class', 'legend')
              .css({
                  left: leftPosition + 'px',
                  'margin-top': top + 'px',
                  'height': markHeight + 'px'
              })
              .hide()
              .text(timeMark.name);

            $('.content', el).append(mark, legend);

            var center = Math.round((legend.width() - (mark.width())) / 2);

            // center align legend
            (function(legend, center){
                setTimeout(function(){
                  legend.css({
                      'margin-left': (-(center)) + 'px'
                  }).fadeIn();
                },600);
            }(legend, center));
        }
    }


    function paintChart(width, height, series, color) {

        for (var i = series.length - 1; i >= 0; i--) {
            series[i].data = formatData(series[i].data);
        }

        var graph = new Rickshaw.Graph({
            element: $('.graph', el)[0],
            width: width,
            height: height,
            renderer: 'line',
            offset: 'expand',
            series: series
        });

        var xAxis = new Rickshaw.Graph.Axis.Time({
            graph: graph,
            timeFixture: new Rickshaw.Fixtures.Time.Local()
        });

        xAxis.render();
        graph.render();
    }

    function formatData(rawData) {

        var sortedData = _.sortBy(rawData, function(num) {
            return num.date;
        });

        return _.map(sortedData, function(e) {

            var ret = {
                x: e.date,
                y: e.sum
            };

            return ret;
        });
    }

    var init = function() {

        if (data.title) {
            $('h2', el).text(data.title);
        }

        if ($('.graph', el).hasClass('rickshaw_graph')) {
            $('.graph', el).empty();
        }

        if (!data.series.length) {
            console.error('There is no results to paint the chart');
            return;
        }

        // paint chart
        var width = el.width() - 50;
        var height = el.closest('li').height() - 80;
        paintChart(width, height, data.series, data.color || 'yellow');

        // paint min max dash
        paintMinMax(data.series);

        // paint time marks
        paintTimeMark(width, height, data.startDate, data.endDate, data.timeMarks);

    }();




}
};

至于我的html页面，我添加了以下内容：

<h2>graphsandbox</h2>
<div class="content">
 <div class="graph rickshaw_graph"></div>

</div>

graphsandbox

---

您能告诉我我是否使用了正确的方法，因为目前只呈现一个空框吗？

您在屏幕截图中看到的图表小部件属于一个内部包，但我可以与您共享：）

Rickshaw在全球范围内都可用，因此您可以创建自己的图表小部件

widget={
onData：功能（el、数据）{
函数drawDashLine（val、max、min）{
变量容器=$（'.content'，el），
视口={
高度：container.height（），
宽度：container.width（）
},
topPosition=（viewport.height-Math.ceil（val/max*viewport.height））；
var dashedLineLine=$（“
”）
.attr（'class'，'dashedLine'）
.css({
宽度：标高宽度（）-40，
顶部：顶部位置+‘px’
});
变量lineLabel=$（“”）
.attr（'class'，'lineLabel'）
.css({
顶部：顶部位置+‘px’
})
.文本（val）；
container.append（虚线、线标签）；
}
函数paintMinMax（系列）{
var mergedData=[]；
对于（var i=series.length-1；i>=0；i--）{
mergedData=mergedData.concat（系列[i].data）；
};
var min=u.min（u.pull（mergedData，'y'）），
max=，
mid=数学四舍五入（最大值/2）；
drawDashLine（最小、最大、最小）；
drawDashLine（中间、最大、最小）；
drawDashLine（最大、最大、最小）；
}
函数paintTimeMark（图表宽度、图表高度、开始日期、结束日期、时间标记数据）{
如果（！timeMarkData | |！timeMarkData.length）{
返回；
}
var chartLengthMs=结束日期-开始日期；
for（var i=0，l=timeMarkData.length；iendDate））{
continue；//超出边界
}
var lengthOfTimemark=timeMark.epoch-startDate；
var百分比=（长度基准/图表长度）；
var leftPosition=数学圆（图表宽度*百分比）；
var top=timeMark.top | 0；
var markHeight=图表高度-顶部；
var color=timeMark.color | |“橙色”；
变量标记=$（''）
.attr（'class'，'mark'）
.css({
左：左位置+‘px’，
“页边距顶部”：顶部+“px”，
“背景色”：颜色，
“高度”：标记高度+“px”
});
变量图例=$（''）
.attr（'类'，'图例'）
.css({
左：左位置+‘px’，
“页边距顶部”：顶部+“px”，
“高度”：标记高度+“px”
})
.hide（）
.文本（时间标记.名称）；
$（'.content'，el）.append（标记，图例）；
var center=Math.round（（legend.width（）-（mark.width（）））/2）；
//中心对齐图例
（功能（图例，中间）{
setTimeout（函数（）{
legend.css({
“左边距”：（中间）+“px”
}).fadeIn（）；
},600);
}（图例，中））；
}
}
功能画图（宽度、高度、系列、颜色）{
对于（var i=series.length-1；i>=0；i--）{
系列[i]。数据=格式数据（系列[i]。数据）；
}
var图形=新人力车。图形({
元素：$（'.graph'，el）[0]，
宽度：宽度，
高度:高度,，
渲染器：“行”，
偏移量：“展开”，
系列：系列
});
var xAxis=新人力车.Graph.Axis.Time({
图：图，
timeFixture:new-richshaw.Fixtures.Time.Local（）
});
xAxis.render（）；
graph.render（）；
}
函数formatData（rawData）{
var sortedData=uu.sortBy（原始数据，函数（num））{
返回num.date；
});
返回映射（sortedData，函数（e）{
变量ret={
x:e.date，
y:e.sum
};
返回ret；
});
}
var init=函数（）{
if（数据标题）{
$（'h2'，el）.text（data.title）；
}
if（$（'.graph'，el）.hasClass（'rickshaw_graph'））{
$（'.graph'，el）.empty（）；
}
如果（！data.series.length）{
console.error（“没有绘制图表的结果”）；
返回；
}
//画图
可变宽度=标高宽度（）-50；
变量高度=标高最近（'li'）。高度（）-80；
漆图（宽度、高度、data.series、data.color | |“黄色”）；
//绘制最小-最大破折号
paintMinMax（数据系列）；
//绘制时间标记
油漆时间标记（宽度、高度
<h2>graphsandbox</h2>
<div class="content">
 <div class="graph rickshaw_graph"></div>

</div>

widget = {

onData: function(el, data) {

    function drawDashLine(val, max, min) {

        var container = $('.content', el),
            viewport = {
                height: container.height(),
                width: container.width()
            },
            topPosition = (viewport.height - Math.ceil(val/max * viewport.height));

        var dashedLineLine = $('<hr />')
            .attr('class', 'dashedLine')
            .css({
                width: el.width() - 40,
                top: topPosition + 'px'
            });

        var lineLabel = $("<span />")
            .attr('class', 'lineLabel')
            .css({
                top: topPosition + 'px'
            })
            .text(val);

        container.append(dashedLineLine, lineLabel);
    }

    function paintMinMax(series) {

        var mergedData = [];

        for (var i = series.length - 1; i >= 0; i--) {
            mergedData = mergedData.concat(series[i].data);
        };

        var min = _.min(_.pluck(mergedData, 'y')),
            max = _.max(_.pluck(mergedData, 'y')),
            mid = Math.round(max / 2);

        drawDashLine(min, max, min);
        drawDashLine(mid, max, min);
        drawDashLine(max, max, min);
    }

    function paintTimeMark(chartWidth, chartHeight, startDate, endDate, timeMarkData) {

        if (!timeMarkData || !timeMarkData.length) {
            return;
        }

        var chartLengthMs = endDate - startDate;

        for (var i = 0, l = timeMarkData.length; i < l; i++) {

            var timeMark = timeMarkData[i];

            // are we in the boundaries?
            if ((timeMark.epoch < startDate) || (timeMark.epoch > endDate)){
                continue; // out of boundaries
            }

            var lengthOfTimemark = timeMark.epoch - startDate;

            var percentage = (lengthOfTimemark / chartLengthMs);

            var leftPosition = Math.round(chartWidth * percentage);

            var top = timeMark.top || 0;
            var markHeight = chartHeight - top;
            var color = timeMark.color || 'orange';

            var mark = $('<div>')
              .attr('class', 'mark')
              .css({
                  left: leftPosition + 'px',
                  'margin-top': top + 'px',
                  'background-color' : color,
                  'height': markHeight + 'px'
              });


            var legend = $('<span>')
              .attr('class', 'legend')
              .css({
                  left: leftPosition + 'px',
                  'margin-top': top + 'px',
                  'height': markHeight + 'px'
              })
              .hide()
              .text(timeMark.name);

            $('.content', el).append(mark, legend);

            var center = Math.round((legend.width() - (mark.width())) / 2);

            // center align legend
            (function(legend, center){
                setTimeout(function(){
                  legend.css({
                      'margin-left': (-(center)) + 'px'
                  }).fadeIn();
                },600);
            }(legend, center));
        }
    }

    function paintChart(width, height, series, color) {

        for (var i = series.length - 1; i >= 0; i--) {
            series[i].data = formatData(series[i].data);
        }

        var graph = new Rickshaw.Graph({
            element: $('.graph', el)[0],
            width: width,
            height: height,
            renderer: 'line',
            offset: 'expand',
            series: series
        });

        var xAxis = new Rickshaw.Graph.Axis.Time({
            graph: graph,
            timeFixture: new Rickshaw.Fixtures.Time.Local()
        });

        xAxis.render();
        graph.render();
    }

    function formatData(rawData) {

        var sortedData = _.sortBy(rawData, function(num) {
            return num.date;
        });

        return _.map(sortedData, function(e) {

            var ret = {
                x: e.date,
                y: e.sum
            };

            return ret;
        });
    }

    var init = function() {

        if (data.title) {
            $('h2', el).text(data.title);
        }

        if ($('.graph', el).hasClass('rickshaw_graph')) {
            $('.graph', el).empty();
        }

        if (!data.series.length) {
            console.error('There is no results to paint the chart');
            return;
        }

        // paint chart
        var width = el.width() - 50;
        var height = el.closest('li').height() - 80;
        paintChart(width, height, data.series, data.color || 'yellow');

        // paint min max dash
        paintMinMax(data.series);

        // paint time marks
        paintTimeMark(width, height, data.startDate, data.endDate, data.timeMarks);

    }();
}