Как вставить скрипт в график CanvasJS

vave

Полезный
Регистрация
22 Июн 2007
Сообщения
466
Реакции
16
Дорогие друзья, подскажите пожалуйста, как данный скрипт, вставить в скрипт графика CanvasJS?

Вот рабочий график, необходимо что бы в зависимости от рандомного значения, менялся ход графика
HTML:
<script>
window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
animationDuration: 100,
        animationEnabled: true,
    zoomEnabled: false,
    axisX:{
    gridThickness: 0,
    tickLength: 0,
    lineThickness: 0,
    labelFormatter: function(){
      return " ";
    }
  },
  axisY:{
    gridThickness: 0,
    tickLength: 0,
    lineThickness: 0,
    labelFormatter: function(){
      return " ";
    }
  },
    backgroundColor: "transparent",

data: [{
        type: "line",
           lineThickness: 3,
        lineColor:"#219634",
        dataPoints: []
   
    }]
});
addDataPointsBuy(100);
chart.render();
function addDataPointsBuy(noOfDps) {
    var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 10;
    for(var i = 0; i < noOfDps; i++) {
yVal = yVal +  Math.round(5 + Math.random() *(-4.4-6.8));
chart.options.data[0].dataPoints.push({x: xVal,y: yVal});
        xVal++;
    }
}
}   
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 100%; width: 100%;">

Вот что пытаюсь сделать, но данный код не работает:
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
animationDuration: 100,
animationEnabled: true,
zoomEnabled: false,
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return " ";
}
},
axisY:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return " ";
}
},
backgroundColor: "transparent",

data: [{
type: "line",
lineThickness: 3,
lineColor:"#219634",
dataPoints: []

}]
});

addDataPointsBuy(100);
chart.render();

function addDataPointsBuy(noOfDps) {
var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 10;
for(var i = 0; i < noOfDps; i++) {



function randomInteger(min, max) {
let rand = min + Math.random() * (max + 1 - min);
return Math.floor(rand);
}
setInterval(function(){
let value = randomInteger(1, 2);

if (value === 1) {
yVal = yVal + Math.round(5 + Math.random() *(-4.4-6.8));
} else {
yVal = yVal + Math.round(6.3 + Math.random() *(-4.4-6.8));
}

document.getElementById("content").innerHTML = value;
},3000);


chart.options.data[0].dataPoints.push({x: xVal,y: yVal});
xVal++;
}
}

}
 
Дорогие друзья, подскажите пожалуйста, как данный скрипт, вставить в скрипт графика CanvasJS?
Вынесите randomInteger за пределы цикла. Объявлять функции в цикле - дурной тон и в ряде случаев может приводить непредсказуемому поведению. К тому же это сказывается на производительности цикла.
setInterval - в цикле тоже ни к чему - он асинхронно выполняется.
Вы наверное что-то вроде этого пытаетесь сделать: Для просмотра ссылки Войди или Зарегистрируйся
 
Вынесите randomInteger за пределы цикла. Объявлять функции в цикле - дурной тон и в ряде случаев может приводить непредсказуемому поведению. К тому же это сказывается на производительности цикла.
setInterval - в цикле тоже ни к чему - он асинхронно выполняется.
Вы наверное что-то вроде этого пытаетесь сделать: Для просмотра ссылки Войди или Зарегистрируйся

Не совсем.

Мне нужно что бы график шел вврех или вниз, в зависимости от значения if (value === 1)
А само значение должно быть рандомным, и меняться каждые 3 секунды.
 
Назад
Сверху