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

Question

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

Answer 1

您需要在数据参数中指定 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>

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

c3 spline chart - Multiple Data on Multiple y Axes

javascript

charts

d3.js

c3.js