Рикша: как установить цвет для осей x и y?

Как я могу установить другой цвет для линий сетки на графике? Я использую его пример:

<!doctype>
<head>
    <link type="text/css" rel="stylesheet" href="../src/css/graph.css">
    <link type="text/css" rel="stylesheet" href="../src/css/detail.css">
    <link type="text/css" rel="stylesheet" href="../src/css/legend.css">
    <link type="text/css" rel="stylesheet" href="css/extensions.css">

    <script src="../vendor/d3.v3.js"></script>
    <script src="../rickshaw.js"></script>
</head>
<body>

<!-- <div id="content">
    <div id="chart"></div>
</div>
 -->
 <style>
#chart {
    position: relative;
    left: 40px;
    }
#y_axis {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
}
#x_axis {
    position: relative;
    left: 40px;
    height: 40px;
}
</style>
 <div id="chart_container">
    <div id="y_axis"></div>
    <div id="chart"></div>
    <div id="x_axis"></div>
</div>

<script>

var tv = 250;

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'line',
    series: new Rickshaw.Series.FixedDuration([{ name: 'one',color: "#30c020"}], undefined, {
        timeInterval: tv,
        maxDataPoints: 100,
        timeBase: new Date().getTime() / 1000
    }) 
} );

///
var y_ticks = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: (function(d) { return d+"%";}) ,
    element: document.getElementById('y_axis')
} );

var xmark = 0;
var format = function(n) {

    var map = {
        0: 'zero',
        1: 'first',
        2: 'second',
        3: 'third',
        4: 'fourth'
    };

    return '|';
}
var yformat = function(n) {
    console.log('yformat0: '+n);
    var nn = n+'%';
    return nn;
}

var x_ticks = new Rickshaw.Graph.Axis.X( {
    graph: graph,
    orientation: 'bottom',
    element: document.getElementById('x_axis'),
    pixelsPerTick: 200,
    tickFormat: format
} );

graph.render();

var i = 0;
var iv = setInterval( function() {
    var data = { one: Math.floor(Math.random() * 40) + 120 };
    graph.series.addData(data);
    graph.render();

}, tv );

</script>

</body>

javascript d3.js rickshaw
person ZedZip    schedule 27.01.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Richshaw предоставляет несколько приятных цветовых палитр.

Посмотрите на palette.color() в приведенном выше фрагменте кода. Он предложит хороший цвет для каждой серии данных. если вы хотите узнать больше о палитрах, вы можете найти их на вики-странице.

var palette = new Rickshaw.Color.Palette({scheme: 'munin'});
var graph = new Rickshaw.Graph({
  element: your_dom_element,
  renderer: "line",
  interpolation: "linear",
  series: [{
     name: "series 1",
     data: your_data_array,
     scale: your_scale,
     color: palette.color()
  }, {
     name: "series 2",
     data: your_data_array,
     scale: your_scale,
     color: palette.color()
  }]
});
person stanleyxu2005    schedule 30.01.2015
comment
Как оно отвечает на вопрос? Он отвечает how to set color for series, но не how to set color for x and y axis. Может быть, я ошибаюсь, можете ли вы уточнить, как я могу установить цвета оси? Не удается найти решение. Спасибо! - person simPod; 21.09.2017
comment
А нашел. НВМ - person simPod; 21.09.2017

arrow_upward
1
arrow_downward

Например, мне удалось установить ось Y, используя следующий CSS

.rickshaw_graph .y_ticks text {
   fill: white;
}

Вы также можете установить ход: stroke: white;

ось х проще:

.rickshaw_graph .x_tick .title {
   color: white;
}
person simPod    schedule 21.09.2017