如何将 [data1, data2 and data3] 绑定到 y 轴，将 data4 绑定到 y2 轴？这是我的实际解决方案：https://codepen.io/luko248/pen/wvaeYON。
1 回答
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
您需要在数据参数中指定 y2 轴数据：
data: {
axes: {data4: 'y2'}
}
查看自定义图表下的 C3 文档： 1. 附加轴https://c3js.org/gettingstarted.html#customize
我根据您的代码示例制作了一个 JSFiddle：https ://jsfiddle.net/89pfy1k4/2/
下面嵌入的 JS 被剪断：
var chart = c3.generate({
bindto: '#PowerChart',
data: {
x: 'DateTime',
xFormat: '%Y-%m-%d %H:%M:%S', //%Y-%m-%d
columns: [
['DateTime', '2019-01-02 00:00:00', '2019-01-02 00:10:00', '2019-01-02 00:20:00', '2019-01-02 00:30:00', '2019-01-02 00:40:00', '2019-01-02 00:50:00', '2019-01-02 01:00:00',
'2019-01-02 01:10:00', '2019-01-02 01:20:00'],
['data1', 30, 20, 10, 15, 35, 16, 18, 42],
['data2', 120, 110, 98, 45, 87, 56, 72, 32],
['data3', 80, 75, 95, 105, 120, 40, 35, 68],
['data4', 40, 45, 40, 45, 50, 40, 45, 50],
],
names: {
data1: 'PV Power(W)',
data2: 'Grid(W)',
data3: 'Battery(W)',
data4: 'SOC(%)',
},
colors: {
data1: '#be1b19',
data2: '#ff9c38',
data3: '#06ac4e',
data4: 'purple',
},
axes: { data4: 'y2'},
type: `spline`
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M',
}
},
y: {
tick: {
format: function (d) { return d + "(W)"; }
}
},
y2: {
show: true,
tick: {
format: function (d) { return d + "(%)"; }
}
}
},
point: {
r: 0,
focus: {
expand: {
r: 4
}
}
},
legend: {
position: 'inset',
inset: {
anchor: 'bottom-right',
x: -30,
y: -75,
step: 1
}
},
padding: {
bottom: 15,
left: 25,
right: 35
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
.chart__container {
max-width: 1024px;
margin: 0 auto;
.c3-tooltip-container {
box-shadow: 0px 0px 5px 0 hsla(0, 0%, 0%, .3);
}
.c3-axis {
fill: black;
}
.domain {
stroke: black;
}
.c3-chart-arc text {
font-size: small;
}
.c3-legend-background {
stroke-width: 0;
}
.c3-grid line {
stroke: #eaeaea;
stroke-dasharray: 0;
}
.c3-tooltip {
border: none;
tbody {
th {
background-color: black;
&:first-of-type {
border-top-left-radius: 3px;
}
&:last-of-type {
border-top-right-radius: 3px;
}
}
td {
border-color: hsl(0, 0%, 84%);
}
> tr:last-of-type > td {
&:first-of-type {
border-bottom-left-radius: 3px;
}
&:last-of-type {
border-bottom-right-radius: 3px;
}
}
}
}
}
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<main>
<div id="PowerChart" class="chart__container"></div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
添加回答
举报
0/150
提交
取消