Axx диаграммы CanvasJS undefined
У меня есть диаграмма CanvasJS, и я хочу динамически установить ее stripLine.
chart = new CanvasJS.Chart("chart",
{
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
Функция, которая устанавливает позицию полосы полоски:
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
console.info(JSON.stringify(chart)); //debug info
console.info("chart.axisX type: " + typeof chart.axisX); //debug info
chart.axisX[0].stripLines[0].set("value", xPos);
}};
После рендеринга я вызываю функцию, но набор не удался. Ошибка:
Uncaught TypeError: Cannot read property '0' of undefined..."
The debug info: "chart.axisX type: undefined". The dumped chart object contains the axisX: "..."axisX":[{"title":"Test axisX title","stripLines":[{"value":250,"color":"#FF0000"}]}]...
Каким может быть undefined axisX, когда я вижу его на визуализированной диаграмме с заголовком и полосковой линией? Почему я не могу получить к нему доступ и изменить? Может ли кто-нибудь помочь мне решить эту проблему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы не видите chart.axisX на сброшенном объекте. То, что вы видите, на самом деле chart.themeOptions.axisX. Кроме того, chart.themeOptions.axisX.set не является функцией (хотя chart.themeOptions.axisX.__defineSetter__ есть).
Согласно документация, «Диаграмма должна быть отрисована, прежде чем вы сможете использовать метод set». Отрисовка диаграммы перед вызовом setVerticalLine в вашем случае должна работать нормально.
Вот рабочий код:
var chart = new CanvasJS.Chart("chart", {
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
chart.options.data.push({type: "line", dataPoints: [{x: 200, y: 100}, {x: 300, y: 50}]}); //Dummy datapoints
chart.render();// Render Chart before using set method
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
chart.axisX[0].stripLines[0].set("value", xPos);
}
};
setVerticalLine(220); //Update Stripline value to 220<script src = "https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id = "chart" style = "height: 260px; width: 100%;"></div>Спасибо за предложение. Мой плохой, думаю, я был недостаточно точен. Функция-модификатор stripLine вызывается из обработчика кнопки. Когда я вызываю это, диаграмма отображается, я вижу, с полосой линии, которая создается в конструкторе (значение: 250). Объект диаграммы доступен, я могу его структурировать и выгрузить. Ошибка вызвана следующей строкой: chart.axisX [0] .stripLines [0] .set ("значение", xPos); . Chart.axisX не определен. Как говорит @thepiercingarrow, существует только chart.options.axisX, у которого нет функции установки. Это противоречит документации, и я не могу решить эту проблему.
После первого рендеринга диаграммы (например, chart.render ()), chart.axisX [0] будет доступен, и chart.axisX [0] .stripLines [0] .set () должен работать нормально.
Вы правы, и вы помогли мне решить мою проблему. После 2+ часов работы над ним функция установки (которая работает в соответствии с документацией и ответами) по-прежнему не работает. Поэтому я изменяю options.axisX.stripLine.value и повторно визуализирую диаграмму.