Я пытаюсь использовать библиотеку jqchart в проекте Angular. инструкции библиотеки относятся к пачке файлов в тегах link
, которые поступают от who-знает-где (они не включены в пакет на их странице загрузки), поэтому я в значительной степени озадаченначало.
<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<script src="../js/jquery.mousewheel.js" type="text/javascript"></script>
Код jquery продолжается с
$(document).ready(function () {
$('#selector').jqChart({
title: {
text: 'Chart Title'
},
etc
etc
И я не знаю, откуда взялся бы jqChart
.
Я знаю, что это не такне особенно специфичен для Angular и подходит для большинства современных фреймворков. И, честно говоря, поскольку я не знаю, откуда эти связанные файлы должны появиться, мне не совсем понятно, как заставить их код работать в базовом HTML-проекте!
Так чтоВопрос в том, как заставить работать код по ссылке выше?
В Angular я попытался вставить код jquery в мою ngAfterViewInit
функцию
$(document).ready(function () {
$('#selector').jqChart({
title: {
text: 'Chart Title'
},
axes: [
{
type: 'category',
location: 'bottom',
zoomEnabled: true
}
],
series: [
{
type: 'column',
data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
['E', 27], ['F', 85], ['D', 43], ['H', 29]]
},
{
type: 'line',
data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
['E', 70], ['F', 60], ['D', 88], ['H', 22]]
}
]
});
});
Как и предполагалось, jqChart
не определено. Я обнаружил jquery.jqChart.min.js
, к которым они относятся, и импорт этого файла в файл компонента вызывает сбой при jquery
, не найденном, потому что этот импортированный файл ссылается на jquery
. Импорт источника jquery
до jqChart
не помогает.
Я также пытался поместить пример кода из этой страницы в метод ngAfterViewInit
. Этот пример кода HTML (без импорта link
или script
, который использует встроенный JS в теге script
. Важная часть примера кода JS:
var chart = new DataViz.Chart({
title: 'Axis Zooming',
animation: { duration: 1 },
axes: [
// config for axes
],
border: {
strokeStyle: '#6ba851'
},
background: background,
series: [
// config for series
]
});
Но, конечно, яполучаю ошибку, что DataViz
не определено. Я даже нашел файл dataviz.chart.min.js
, который страница импортирует в своем собственном источнике, но импортировать его в код моего компонента не помогает.