gpt4 book ai didi

javascript - Rickshaw:如何设置x轴和y轴的颜色?

转载 作者:行者123 更新时间:2023-12-02 16:32:30 38 4
gpt4 key购买 nike

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

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

最佳答案

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

关于javascript - Rickshaw:如何设置x轴和y轴的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28173908/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com