使用 Prototype.js 和 C3.js

Question

我有一个使用 prototype.js 的旧 Web 项目，我正在尝试使用 C3 向其添加图表。

不幸的是，出现了一个错误，因为原型似乎向数组添加了一堆方法，而 c3.js checkValueInTargets 中的这个特定方法使用 Object.keys 获取数组中的所有随机方法，然后抛出一个错误。

有没有办法从原型中 "hide" 我的图表代码或使用默认 JS 数组的方法？

很遗憾，我无法删除或升级原型。

谢谢

示例项目：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

http://jsfiddle.net/Yq3DW/269/

Answer 1

一个简单的修复方法是将原型脚本加载移动到 c3.js 图表初始化调用之后。

    ...
    <link href="lib/c3.js/c3.css" rel="stylesheet" />
</head>
<body>
    ...
    <div id="chart"></div>
    ...
    <script src="lib/d3/d3.js" charset="utf-8"></script>
    <script src="lib/c3.js/c3.js"></script>
    <script>
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'bar'
            },
            bar: {
                width: {
                    ratio: 0.5 // this makes bar width 50% of length between ticks
                }
                // or
                //width: 100 // this makes bar width 100px
            }
        });
    </script>

    <script src="lib/prototype/prototype.js"></script>
    <!-- prototype code --->
</body>

如果这不可能，您可以有一个脚本块来存储对本机的引用 Object.keys 并在调用 C3 代码时将其换出并换回，就像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <script>
        var originalKeys = Object.keys;
    </script>
    <script src="lib/prototype/prototype.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script src="lib/d3/d3.js" charset="utf-8"></script>
    <script src="lib/c3.js/c3.js"></script>
    <link href="lib/c3.js/c3.css" rel="stylesheet" />
    <script>
        var prototypeKeys = Object.keys;
        Object.keys = originalKeys;
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'bar'
            },
            bar: {
                width: {
                    ratio: 0.5 // this makes bar width 50% of length between ticks
                }
                // or
                //width: 100 // this makes bar width 100px
            }
        });
        Object.keys = prototypeKeys;
    </script>
</body>
</html>

幸运的是工具提示不会造成任何问题

Fiddle - http://jsfiddle.net/td433xt1/

使用 Prototype.js 和 C3.js

Using Prototype.js with C3.js

javascript

prototypejs

c3.js