Char.js Интерполяция линейной

я пытаюсь сделать функции с Chart.js У меня есть проблема с моей жеребьевкой давайте посмотрим: here Char.js Интерполяция линейной

Это «х» функции и линия не является прямой
я не знаю, если это проблема разрешения или интерполяции
Так вот мой график:

var scatterChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      datasets: [{ 
       borderWidth:2, 
       pointRadius :0, 
       borderColor: 'rgba(0, 0, 255, 1)', 
       label: 'Scatter Dataset', 
       data: JSON.parse(data), 
       fill: false, 
       lineTension: 0, 
       cubicInterpolationMode: 'linear' 

      }] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        type: 'linear', 
        position: 'bottom' 
       }] 
      }, 
      pan: { 
       enabled: true, 
       mode: 'xy' 
      }, 
      zoom: { 
       enabled: true, 
       mode: 'xy', 
      }, 
      responsive: true, 
      maintainAspectRatio: true, 
     } 
    });

Thx ребята

источник

2016-11-16 Olivier.B

В 'данных: {наборов данных: [{данные: JSON.parse (данных) ...', что значение 'data' переменной передается' JSON. parse'? –

Это просто строка как объект JS, подобный этому: [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 5 }, ......., {x: 100, y: 100}] здесь мой шаг равен 1 –

Если точки являются линейными, то это должен быть способ отображения chart.js. Во-первых, прямо над 'var scatterChart' добавьте строку' console.log (data); 'и добавьте этот вывод в свой вопрос, чтобы мы могли увидеть обработанную _true_' json'. Затем попробуйте выполнить жесткое кодирование 'data: [{x: 1, y: 1}, {x: 100, y: 100}],' и посмотреть, выглядит ли строка лучше. –

Проблема заключается в том, как chart.js рисует небольшие сегменты линии между точками данных. Вот fiddle, который оживляет полную линию непрозрачности поверх более светлой линии. Вторая линия растет на step=1, в то время как светлая линия хороша и прямая [{x:-100,y:-100},{x:100,y:100}]. Если вы перейдете на step=10, вы увидите прямую линию.

В приведенном ниже коде (или в скрипке) вы можете играть с изменением borderWidth, borderColor и opacity. Я попробовал добавить borderCapStyle: 'round' и borderJoinStyle: 'round', но ни один из них не оказал большого эффекта.

var ctx = document.getElementById("test").getContext("2d"); 
var i = -100; 
var data = [{x: i, y: i}]; 
var scatterChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    datasets: [{ 
     borderWidth: 2, 
     pointRadius: 0, 
     borderColor: 'rgba(0, 0, 255, 1)', 
     label: 'Scatter Dataset 1', 
     data: data, 
     fill: false, 
     lineTension: 0, 
     cubicInterpolationMode: 'linear' 
    }, { 
     borderWidth: 2, 
     pointRadius: 0, 
     borderColor: 'rgba(0, 0, 255, 0.4)', 
     label: 'Scatter Dataset 2', 
     data: [{x:-100,y:-100},{x:100,y:100}], 
     fill: false, 
     lineTension: 0, 
     cubicInterpolationMode: 'linear' 
    }] 
    }, 
    options: { 
    scales: { 
     xAxes: [{ 
     type: 'linear', 
     position: 'bottom' 
     }] 
    }, 
    pan: { 
     enabled: true, 
     mode: 'xy' 
    }, 
    zoom: { 
     enabled: true, 
     mode: 'xy', 
    }, 
    responsive: true, 
    maintainAspectRatio: true, 
    } 
}); 
var step = 1; 
var intervalId = setInterval(function() { 
    i += step; 
    if (i <= 100) { 
    scatterChart.data.datasets[0].data.push({x:i,y:i}); 
    scatterChart.update(); 
    } else { 
    clearInterval(intervalId); 
    } 
}, 200);

<canvas id="test" width="400" height="300"></canvas>

источник

2016-11-17 19:49:51

ответ

Смежные вопросы