2015-08-11 2 views
2

С AMCharts можно выбрать отдельные графики для редактирования через css. Если вы даете граф идентификатор вы увидите селекторJavascript AMCharts ссылочный граф по ID не работает

amcharts-graph-[id] 

класса, например

<g transform="translate(0,0)" class="amcharts-graph-smoothedLine amcharts-graph-g1"> 

однако это не работает всегда так же, как и я не вижу разницы. Может кто-нибудь мне помочь?

Чтобы уточнить, у меня есть примеры с одним и тем же кодом. Первый показывает класс (и вы можете ссылаться на него через css), второй - нет.

  1. Offical Demo по AMCharts: http://www.amcharts.com/demos/intraday-data/
  2. точно так же Demo открыт в codepen (нажав редактировать на первую ссылку, а затем открыть в codepen) http://codepen.io/anon/pen/mJoaNB

Вы видите разницу, когда вы проверяете элемент графа (зеленая линия). Атрибут класса для строки отсутствует в примере codepen (и во всех моих тестах на моем сервере).

Вы видите разницу даже в том случае, если вы скопируете и вставьте тот же код css в обоих случаях, демонстрационный пример (нажав править) и пример codepen: Первый будет отключать линию, второй не будет - но в чем разница?

#chartdiv { 
    width : 100%; 
    height : 500px; 
}  

.amcharts-graph-g1 .amcharts-graph-stroke { 
    stroke-dasharray: 1000%; 
    -webkit-animation: css-effect 10s ease-out forwards; 
     animation: css-effect 10s ease-out forwards; 
} 

@-webkit-keyframes css-effect { 
    0% { 
    stroke-dashoffset: 1000%; 
    } 
    100% { 
    stroke-dashoffset: 0%; 
    } 
} 
@keyframes css-effect { 
    0% { 
    stroke-dashoffset: 1000%; 
    } 
    100% { 
    stroke-dashoffset: 0%; 
    } 
} 

ответ

2

Вы правы в amCharts, применяя имена классов с идентификатором объектов. Что вы пропустили, так это то, что оно не включено по умолчанию.

Чтобы включить эту функцию, вам необходимо установить addClassNames в true в конфигурацию диаграммы.

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "stock", 
    "addClassNames": true, 
    // ... 
}); 

Вот же демо, с приложенным выше, анимация работает, как ожидалось:

http://codepen.io/team/amcharts/pen/89720c7ca5b05e8ad8cea239a6fec30e/

+0

маленькие детали, но вы правы, я пропустил его. – Peter

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