人力车：如何设置 x 轴和 y 轴的颜色？

Question

如何为图表中的网格线设置另一种颜色？我用他的例子：

<!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>

Answer 1

Richshaw 提供了一些漂亮的调色板。

查看上面代码片段中的palette.color()。它将为每个数据系列建议漂亮的颜色。如果你想知道更多的调色板，你可以在它的wiki页面找到。

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()
  }]
});

Answer 2

例如，我设法使用以下 CSS

设置了 Y 轴

.rickshaw_graph .y_ticks text {
   fill: white;
}

您还可以设置笔画：stroke: white;

x轴更简单：

.rickshaw_graph .x_tick .title {
   color: white;
}

人力车：如何设置 x 轴和 y 轴的颜色？

Rickshaw: how to set color for x and y axis?

javascript

d3.js

rickshaw