Использование Prototype.js с C3.js

У меня есть старый веб-проект, который использует prototype.js, и я пытаюсь добавить к нему графику с помощью C3.Использование Prototype.js с C3.js

К сожалению, есть ошибка, так как прототип, кажется, добавляет кучу методов в массивы, и этот конкретный метод в c3.js checkValueInTargets использует Object.keys, который захватывает все случайные методы в массиве и затем выдает ошибку.

Есть ли способ «скрыть» мой код диаграммы от прототипа или способ использования массивов 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/

источник

2015-07-27 kyl

Вы связались с версией 1.6.1, можете ли вы обновить версию 1.7.2 в апреле 2014 года? –

К сожалению, я не могу; это уже существующий проект, и обновление выходит за рамки того, что я пытаюсь сделать. – kyl

ошибка с 'Object.keys', чтобы вы могли скопировать этот метод и вернуть изменение после загрузки прототипа? или может быть что-то, что можно сделать внутри файла C3.js, чтобы метод 'checkValueInTargets()' обрабатывал ошибку –

Один простой способ исправить это было бы перенести нагрузку прототип сценария для после 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 и поменять его и обратно при вызове кода С3, как и

<!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/

источник

2015-07-28 11:16:35 potatopeelings

Хорошо работает для диаграммы с осями. Однако prototype.js все еще ломает что-то при попытке сделать круговую диаграмму. Появляется только легенда. Любые идеи о том, как решить эту проблему? – John

Использование Prototype.js с C3.js

ответ

Смежные вопросы