如何将[data1，data2和data3]绑定到y轴，将data4绑定到y2轴？这是我的实际解决方案：https://codepen.io/luko248/pen/wvaeYON。
您需要在数据参数中指定y2轴数据：
data: {
axes: {data4: 'y2'}
}
请参阅point1（附加轴）下的C3文档：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`,
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
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>