настроить canvasjs График

vave

vave

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

Я кое как смог настроить фиксированный результат, уход линии вверх или вниз.
Но при это график приемущественно начинается сверху, если должен уйти вниз и наоборот.
С центра начинается крайне редко.

Так вот как сделать так, что бы линия графика всегда начиналась с центра?


Код: 
function addDataPoints(noOfDps) {
    var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 1;
    for(var i = 0; i < noOfDps; i++) {
        yVal = yVal +  Math.round(5 + Math.random() *(-5-5.5));
        chart.options.data[0].dataPoints.push({x: xVal,y: yVal});   
        xVal++;
    }}}

Сейчас его положение Y начинается рандомно.
Выглядит примерно так
atFjbnSRT84.jpg


Буду очень благодарен за помощь!
 
Не работал с этой библиотекой,но есть пара идей
1. Перед построением графика, пробегаем по всем точкам и ищем максимальную/минимульную. Вычисляем их середину и добавляем в начало датасета точку середины. Но в случае подгрузки данных не сработает
2. Инвертируем знак относительно оси у, используя "мнимые" показания. То есть делаем предположение относительно максимального и минимального значения графика, вычисляем середину, и все что меньше середины - делаем отрицательным. к примеру, знаем что минимум 0, максимум 1000. имеем 700. В качестве значения у используем 200. Имеем 300. В качестве значения используем -200. Тогда график всегда будет выровнен относительно оси Х
 
aboyarshinov написал(а):
Не работал с этой библиотекой,но есть пара идей
1. Перед построением графика, пробегаем по всем точкам и ищем максимальную/минимульную. Вычисляем их середину и добавляем в начало датасета точку середины. Но в случае подгрузки данных не сработает
2. Инвертируем знак относительно оси у, используя "мнимые" показания. То есть делаем предположение относительно максимального и минимального значения графика, вычисляем середину, и все что меньше середины - делаем отрицательным. к примеру, знаем что минимум 0, максимум 1000. имеем 700. В качестве значения у используем 200. Имеем 300. В качестве значения используем -200. Тогда график всегда будет выровнен относительно оси Х
Нажмите для раскрытия...
Показатели графика должы быть всегда рандомные, только начинаться с центра а заканчиваться уходом вниз или вверх
 
vave написал(а):
Показатели графика должы быть всегда рандомные, только начинаться с центра а заканчиваться уходом вниз или вверх
Нажмите для раскрытия...
Тогда вариант 2 должен решить проблемы
Не подходит ?
Или настолько рандомные,что невозможно предположить?
 
aboyarshinov написал(а):
Тогда вариант 2 должен решить проблемы
Не подходит ?
Или настолько рандомные,что невозможно предположить?
Нажмите для раскрытия...
Так а какие какие изменения нужно внести в код? я просто в этом не силен)
 
vave написал(а):
Так а какие какие изменения нужно внести в код? я просто в этом не силен)
Нажмите для раскрытия...
Ну... Что то вроде такого будет:


function addDataPoints(noOfDps) {
const middle = -5; // Предполагаемая середина между min/max
var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 1;
for(var i = 0; i < noOfDps; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5.5)) - middle;
chart.options.data[0].dataPoints.push({x: xVal,y: yVal});
xVal++;
}}}

А у тебя в графике так и планируется случайные данные отображать? Или это для примера с использованием Math.random сделал добавление данных ?
 
aboyarshinov написал(а):
Ну... Что то вроде такого будет:


function addDataPoints(noOfDps) {
const middle = -5; // Предполагаемая середина между min/max
var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 1;
for(var i = 0; i < noOfDps; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5.5)) - middle;
chart.options.data[0].dataPoints.push({x: xVal,y: yVal});
xVal++;
}}}

А у тебя в графике так и планируется случайные данные отображать? Или это для примера с использованием Math.random сделал добавление данных ?
Нажмите для раскрытия...
К сожалению не сработало, график просто ушел ровной линией сверху вниз...

Да все верно, так и планируется случайные данные отображать.


Вот полный код графика
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: []
       
    }]
});
addDataPoints(1000); 
chart.render();
function addDataPoints(noOfDps) {
    var xVal = chart.options.data[0].dataPoints.length + 1, yVal = 1;
    for(var i = 0; i < noOfDps; i++) {
        yVal = yVal +  Math.round(5 + Math.random() *(-4.9-5.5));
        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="z-index:9999; height: 100%; width: 100%;"><div class="canvasjs-chart-container" style="position: relative; text-align: left; cursor: auto;"><canvas class="canvasjs-chart-canvas" width="1900" height="500" style="width: 1520px; height: 400px; position: absolute; user-select: none;"></canvas><canvas class="canvasjs-chart-canvas" width="1900" height="500" style="width: 1520px; height: 400px; position: absolute; -webkit-tap-highlight-color: transparent; user-select: none; cursor: default;"></canvas><div class="canvasjs-chart-toolbar" style="position: absolute; right: 1px; top: 1px; border: 1px solid transparent;"></div><div class="canvasjs-chart-tooltip" style="position: absolute; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px; z-index: 1000; pointer-events: none; display: none; border-radius: 5px;"><div style=" width: auto;height: auto;min-width: 50px;line-height: auto;margin: 0px 0px 0px 0px;padding: 5px;font-family: Calibri, Arial, Georgia, serif;font-weight: normal;font-style: italic;font-size: 14px;color: #000000;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: left;border: 2px solid gray;background: rgba(255,255,255,.9);text-indent: 0px;white-space: nowrap;border-radius: 5px;-moz-user-select:none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;} "> Sample Tooltip</div></div><a class="canvasjs-chart-credit" title="JavaScript Charts" style="outline:none;margin:0px;position:absolute;right:2px;top:386px;color:dimgrey;text-decoration:none;font-size:11px;font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif" tabindex="-1" target="_blank" href="https://canvasjs.com/">CanvasJS.com</a></div></div>
 
Вот что-то типа такого должно получится:
F8cyHsZbvO0.jpg


Кстати я заметил, что форма и направление, зависит от этих показателей (-5-5.5).
Пытаюсь настроить так, что бы конец был всегда внизу, но при этом разброс был максимальный. Но к сожалению, чем больше разброс, том более рандомный итог((
 
Последнее редактирование:
upload_2019-10-28_9-17-6.png

Ну вот что то такое получается, если из середины делать старт

Измененный код:

let chartData = [{x:0,y:0}];
cahrtData = addDataPoints(1000,chartData);
chart.options.data[0].dataPoints = chartData;
chart.render();
function addDataPoints(noOfDps,data) {
var xVal = data.length + 1, yVal = 1;
let min = 1000;
let max = -1000;
for(var i = 0; i < noOfDps; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-4.9-5.5));
data.push({x: xVal,y: yVal});
xVal++;
if(yVal > max) max = yVal;
if(yVal < min) min = yVal;
}
data[0].y = (max+min)/2;
return data;
}
 
aboyarshinov написал(а):
Посмотреть вложение 106180

Ну вот что то такое получается, если из середины делать старт

Измененный код:

let chartData = [{x:0,y:0}];
cahrtData = addDataPoints(1000,chartData);
chart.options.data[0].dataPoints = chartData;
chart.render();
function addDataPoints(noOfDps,data) {
var xVal = data.length + 1, yVal = 1;
let min = 1000;
let max = -1000;
for(var i = 0; i < noOfDps; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-4.9-5.5));
data.push({x: xVal,y: yVal});
xVal++;
if(yVal > max) max = yVal;
if(yVal < min) min = yVal;
}
data[0].y = (max+min)/2;
return data;
}
Нажмите для раскрытия...
Ну это не совсем то))
Хотелось бы что бы он хотя бы чутка прошёлся вперед)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху