Question

我用C3.js创建了一个图表图表。

完美地生成图表。

<!DOCTYPE html>
<html>
    <head>
        <title>D3</title>

        <!-- Load c3.css -->
        <link href="c3_library/c3.css" rel="stylesheet">

        <!-- Load d3.js and c3.js -->
        <script src="d3_lib/d3.v3.min.js" charset="utf-8"></script>
        <script src="c3_library/c3.min.js"></script>
        <script src="jquery/jquery-3.2.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">

    </head>
    <body>

        <div id="chart1"></div>

        <button onclick="loadData()">Load Data 2</button>

        <script type="text/javascript">

            var chart = c3.generate({

                bindto: '#chart1',
                data: {
                    x: 'x',
                    xFormat: '%H:%M',
                    columns: [
                        ['x', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:48', '10:49', '10:50', '10:51', '10:52'],
                        ['User Logins', 0, 2, 0, 0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 5, 0, 0]
                    ]
                },
                axis: {
                    x: {
                        type: 'timeseries',
                        // if true, treat x value as localtime (Default)
                        // if false, convert to UTC internally
                        localtime: true,
                        tick: {
                            format: '%H:%M'
                        }
                    }
                }

            });

            function loadData() {

                chart.load({

                    bindto: '#chart1',
                    data: {
                        x: 'x',
                        xFormat: '%H:%M',
                        columns: [
                            ['x', '10:28', '10:29', '10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43'],
                            ['User Logins', 50, 2, 0, 2, 3, 4, 0, 0, 0, 10, 2, 0, 9, 5, 0, 0]
                        ]
                    },
                    axis: {
                        x: {
                            type: 'timeseries',
                            // if true, treat x value as localtime (Default)
                            // if false, convert to UTC internally
                            localtime: true,
                            tick: {
                                format: '%H:%M'
                            }
                        }
                    }

                });

            }

        </script>

    </body>
</html>

但是当调用chart.load()函数时，它不会更改图表。也没有显示任何错误。代码片段附在此处。在这里，我创建了一个使用x和y轴数据集的图表。

Answer 1

你无法在load方法中加载所有内容（你可以加载行和列）试试这个：

chart.load({


            columns: [
                [ 'x','10:28','10:29','10:30','10:31','10:32','10:33','10:34','10:35','10:36','10:37','10:38','10:39','10:40','10:41','10:42','10:43' ],
                [ 'User Logins',50,2,0,2,3,4,0,0,0,10,2,0,9,5,0,0]
            ]



    });

C3.js加载功能不起作用

1 个答案: