Question

我有一个使用prototype.js的旧网站项目，我尝试使用C3为其添加图表。

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

有没有办法隐藏＆＃34;我的原型图表代码或使用默认JS数组的方式？

不幸的是，我无法移除或升级原型。

由于

示例项目：

foreach ($array as $key => $val) {
    $currentKey = $key++;
    $nextKey = isset($array[$key]) ? $key: null;

    var_dump(array('current' => $currentKey, 'next' => $nextKey));
}

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>

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

小提琴 - http://jsfiddle.net/td433xt1/

将Prototype.js与C3.js一起使用

1 个答案: