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

【问题标题】：Rickshaw: how to set color for x and y axis?人力车：如何设置 x 和 y 轴的颜色？
【发布时间】：2023-03-05 13:40:01
【问题描述】：

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

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

【解决方案1】：

Richshaw 提供了一些不错的调色板。

看上面代码sn-p中的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()
  }]
});

【讨论】：

它是如何回答这个问题的？它回答how to set color for series，但不回答how to set color for x and y axis。也许我错了，你能澄清我如何设置轴颜色吗？找不到解决办法。谢谢！
啊找到了。 NVM

【解决方案2】：

例如，我设法通过使用以下 CSS 设置 Y 轴

.rickshaw_graph .y_ticks text {
   fill: white;
}

也可以设置笔画：stroke: white;

x轴更容易：

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

【讨论】：