c3 样条图 - 多个 y 轴上的多个数据

Question

如何将 [data1, data2 and data3] 绑定到 y 轴，将 data4 绑定到 y2 轴？这是我的实际解决方案：https://codepen.io/luko248/pen/wvaeYON。

Answer 1

您需要在数据参数中指定 y2 轴数据：data: {&nbsp;&nbsp; &nbsp; axes: {data4: 'y2'}&nbsp;}查看自定义图表下的 C3 文档： 1. 附加轴https://c3js.org/gettingstarted.html#customize我根据您的代码示例制作了一个 JSFiddle：https ://jsfiddle.net/89pfy1k4/2/下面嵌入的 JS 被剪断：&nbsp;var chart = c3.generate({&nbsp; &nbsp; &nbsp; &nbsp; bindto: '#PowerChart',&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 'DateTime',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xFormat: '%Y-%m-%d %H:%M:%S', //%Y-%m-%d&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['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',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '2019-01-02 01:10:00', '2019-01-02 01:20:00'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['data1', 30, 20, 10, 15, 35, 16, 18, 42],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['data2', 120, 110, 98, 45, 87, 56, 72, 32],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['data3', 80, 75, 95, 105, 120, 40, 35, 68],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['data4', 40, 45, 40, 45, 50, 40, 45, 50],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; names: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data1: 'PV Power(W)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data2: 'Grid(W)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data3: 'Battery(W)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data4: 'SOC(%)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colors: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data1: '#be1b19',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data2: '#ff9c38',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data3: '#06ac4e',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data4: 'purple',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axes: { data4: 'y2'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: `spline`&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; axis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'timeseries',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tick: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: '%H:%M',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tick: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: function (d) { return d + "(W)"; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y2: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tick: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: function (d) { return d + "(%)"; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; point: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; expand: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'inset',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inset: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; anchor: 'bottom-right',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: -30,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -75,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; step: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; padding: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 15,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 25,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 35&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; grid: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });.chart__container {&nbsp; max-width: 1024px;&nbsp; margin: 0 auto;&nbsp; &nbsp; .c3-tooltip-container {&nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0px 0px 5px 0 hsla(0, 0%, 0%, .3);&nbsp; &nbsp; }&nbsp; &nbsp; .c3-axis {&nbsp; &nbsp; &nbsp; &nbsp; fill: black;&nbsp; &nbsp; }&nbsp; &nbsp; .domain {&nbsp; &nbsp; &nbsp; &nbsp; stroke: black;&nbsp; &nbsp; }&nbsp; &nbsp; .c3-chart-arc text {&nbsp; &nbsp; &nbsp; &nbsp; font-size: small;&nbsp; &nbsp; }&nbsp; &nbsp; .c3-legend-background {&nbsp; &nbsp; &nbsp; &nbsp; stroke-width: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .c3-grid line {&nbsp; &nbsp; &nbsp; &nbsp; stroke: #eaeaea;&nbsp; &nbsp; &nbsp; &nbsp; stroke-dasharray: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .c3-tooltip {&nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; tbody {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; th {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:first-of-type {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:last-of-type {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-right-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; td {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-color: hsl(0, 0%, 84%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; > tr:last-of-type > td {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:first-of-type {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-left-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:last-of-type {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}<head>&nbsp; <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css"></head><body>&nbsp; <main>&nbsp; &nbsp; <div id="PowerChart" class="chart__container"></div>&nbsp; </main>&nbsp; <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>