Диаграмма оси CanvasJS не определена - PullRequest
0 голосов
/ 15 сентября 2018

У меня есть диаграмма 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
    });

Функция, которая устанавливает положение stripLine:

var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
    console.log(JSON.stringify(chart));  //debug info
    console.log("chart.axisX type: " + typeof chart.axisX); //debug info
    chart.axisX[0].stripLines[0].set("value", xPos);
}};

После рендеринга я вызываю функцию, но установка не удалась.
Ошибка:

Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного ..."
Отладочная информация: « тип chart.axisX: не определено ». Сброшенный график объект содержит axisX: "..." axisX": [{" title ":" Test axisX Название», "полосковые линии": [{ "значение": 250, "цвет": "# FF0000"}]}] ...

Как может быть undefined axisX, когда я вижу его на визуализированном графике с заголовком и полосой? Почему я не могу получить к нему доступ и изменить? Может кто-нибудь помочь мне решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

В соответствии с документацией , ' Диаграмма должна быть отрисована перед использованием метода 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>
0 голосов
/ 15 сентября 2018

Вы не видите chart.axisX на сброшенном объекте.То, что вы видите, на самом деле chart.themeOptions.axisX.Кроме того, chart.themeOptions.axisX.set не является функцией (хотя chart.themeOptions.axisX.__defineSetter__ есть).

...