#javascript #vue.js
#javascript #vue.js
Вопрос:
У меня есть файл JavaScript, и я хочу, чтобы та же логика была реализована с использованием Vuejs со стандартами ES6. Я хочу добавить эту логику в «LineChart.vue», а затем импортировать ее в свой parent.vue для отображения диаграмм.
Как и в vuejs, существует множество методов перехвата жизненного цикла, поскольку я новичок в vuejs, я не знаю, как реализовать эту же логику в vuejs. Пожалуйста, помогите мне с этим.
Код здесь:
function chart_shot(type, id, interval) {
$.ajax({
type: "GET",
url: getApiUrl("find/" type "?interval=" interval),
headers: {
"api_key": ''
},
cache: true,
timeout: 30,
dataType: "json",
success: function (data) {
var ctx = document.getElementById(id);
var highChart = [];
for(i = 0; i < data["date"].length; i ) {
highChart.push({
t: moment(data["date"][i], "X").toDate(),
y: data["challenges"][i]
})
}
if(my !== undefined) {
my.destroy();
}
my = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "challenges",
data: highChart,
}]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value '%';
}
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
labelString: ''
},
}]
}
}
});
}
});
}
Пожалуйста, помогите мне с этим, поскольку я новичок в vuejs, я не знаю эффективного способа написания этого кода в vuejs.
И, пожалуйста, скажите мне, в каком типе файла это можно сделать, я имею в виду в js или vue?
И как написанный код можно использовать в другом компоненте vue.
Комментарии:
1. Этот код выглядит как функция для получения http-запроса и обработки ответа. На самом деле это никак не связано с vue. Возможно, вы хотите спросить, как обрабатывать ajax в ванильном Javascript (без jQuery) или как использовать ответы при создании компонентов пользовательского интерфейса с помощью vue?
2. Конечно, это функция, но если я вставлю тот же точный код в vue, я получу слишком много ошибок, поэтому я хочу знать, как эту же логику можно записать с помощью vuejs, потому что в vue js есть определенные изменения, и я мало что знаю, поскольку я новичок в vuejs.
3. Вы ознакомились с официальной оболочкой vue для highcharts? Кроме того, вы используете vue2 или 3? Поскольку вы новичок в Vue, я бы лично попробовал выполнять более простые задачи, прежде чем углубляться в построение графиков и повторно используемые компоненты
4. Однако ошибки, которые вы получаете, не связаны с vue. Код, который вы представляете, является чистым javascript, за исключением jquery и highcharts, похоже. Похоже на функцию для подготовки ответа API для отображения диаграмм. Не имеет никакого отношения к vue.js который представляет собой фреймворк пользовательского интерфейса. Если это не очевидно, я согласен с @discolor, что вы, возможно, немного погружены в воду, и вам было бы полезно сначала узнать, что на самом деле делает vue, а что нет.
Ответ №1:
https://codesandbox.io/s/dry-cache-ilesg
Вот небольшая демонстрация приложения VueJS, связанная с вашим вопросом. Пожалуйста, проверьте это, вы получите некоторое представление о том, как это работает.
Комментарии:
1. Спасибо, это действительно полезно. Теперь я должен знать, где разместить такой файл в приложении vue, но последнее, что я хочу знать, это с помощью chartjs как отображать диаграммы с моим файлом JavaScript, пожалуйста, помогите мне с этим, предоставив демонстрацию.
2. codesandbox.io/s/93m1lpjrvr Здесь вы получаете демо-версию vue chartjs medium.com/risan/vue-chart-component-with-chart-js-db85a2d21288 И вот вам все объяснения.
3. Большое вам спасибо, теперь, как мне использовать мой файл javascript для отображения линейной диаграммы с использованием диаграммы js, пожалуйста, пришлите мне ее демонстрацию, взяв в качестве примера какой-нибудь API, потому что ваша демонстрация действительно помогает мне понять поток кода.