node.js - Atlasboard 和人力车

Question

我正在尝试使用 atlasboard 和人力车创建仪表板。现在发生的是 atlasboard 默认情况下具有黑色背景，并且在创建图形(例如 WIKI markdown 分析)时无法看到 x 轴和 y 轴。

如果您从官方 atlasboard 页面查看下面的示例屏幕截图，您会发现 atlassian 开发人员似乎已经设法将 x 轴显示为白色，所以我想知道:

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

• 是否有任何需要覆盖的 css 或者是否有任何类型的要在 nodejs 中设置的设置？

• 或者除了 rickshaw 之外还应该使用其他图形框架(以及如何做到这一点)？

有人可以解释一下吗？

_{(来源:bitbucket.org)}

更新 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);

    }();




}
};

然后在我添加的工作中:

module.exports = function(config, dependencies, job_callback) {
var text = "Hello World!";


var date1 = (new Date(2014, 4, 2, 1, 30, 0, 0))/1000;
var date2 = (new Date(2014, 5, 3, 2, 30, 0, 0))/1000;
var date3 = (new Date(2014, 6, 4, 3, 30, 0, 0))/1000;
var date4 = (new Date(2014, 7, 6, 4, 30, 0, 0))/1000;

var totalBacklogDefects = [{ x: date1, y : 40},
 { x: date2, y : 30}, 
 { x: date3, y : 23},       { x: date4, y : 10}  ] ;
var blockedDefects = [{ x: date1, y : 32}, { x: date2, y : 22}, 
  { x: date3, y : 3}, { x: date4, y : 5} ] ;
var fixedDefects = [{ x: date1, y : 2}, { x: date2, y : 12},
{ x: date3 ,y : 20}, { x: date4, y : 25} ] ;


var series = [
            {

                data: totalBacklogDefects , 
                color: 'steelblue',
                name: 'Total Backlog'
            },
            {
                data: blockedDefects ,
                color: 'red',
                name: 'Blocked Defects'
            },
            {
                data: fixedDefects,
                color: 'green',
                name: 'Fixed'
            }
        ];


 var timeMarks = [ 
               {
                  top: 0,
                  color: 'red', 
                  name: 'test2',
                  epoch: date2

               },
               {
                  top: 0,
                  color: 'blue',
                  name: 'test1',
                  epoch: date3

               }

];

job_callback(null, {title: "Graph Sandbox", series: series, startDate: date1 , 
endDate :  date4 , timeMarks: timeMarks});
};

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

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

</div>

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

Answer 1

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

Rickshaw 无论如何都可以在全局范围内使用，因此您可以创建自己的图表小部件 check Rickshaw's examples .

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);

    }();
}

};