Я хочу изменить внешний вид графика, используя chart.js - PullRequest
0 голосов
/ 27 августа 2018

Это мой обязательный график

enter image description here

Я хочу, чтобы мой график выглядел так

Я хочу отобразить мое последнее значение набора данных в последней точке и отредактировать его положение на холсте. Как мне этого добиться?

Я могу увеличить размер последней точки данных на графике js

что я сделал до сих пор

enter image description here

var config = {
    type: 'line',
    data: {
              datasets: [{
                label: 'Temperature',
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.green,
                data: DataFormate,
                pointRadius: RadiusSize,
                pointHitRadius: RadiusSize,
                pointHoverBorderWidth: RadiusSize,
                fill: false,
              }]
             },
            options: {
                responsive: true,
                title: {
                    display: false,
                    text: 'Temperature'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'linear',
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Day'
                        },
                        time: {
                            unit: 'hour',
                            min: fromTime,
                            max: currentDate,
                            minUnit: 2,
                            stepSize: 2,                            
                            displayFormats: {
                                quarter: 'h:mm:ss a'
                            }
                        }

                    }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                steps: 5,
                                stepValue: 5,
                                max: 40,
                                min: 10
                            }
                     }]
                }
        }
};
function drawGraph(lastValue){
    var ctx = document.getElementById('canvas').getContext('2d');
    var chartObject = new Chart(ctx, config);

    if(lastValue>=maxLimit){
        chartObject.data.datasets[0].backgroundColor = window.chartColors.red;
        chartObject.data.datasets[0].borderColor = window.chartColors.red;
        chartObject.update();
    }else if(lastValue<=minLimit){
        chartObject.data.datasets[0].backgroundColor = window.chartColors.blue;
        chartObject.data.datasets[0].borderColor = window.chartColors.blue;
        chartObject.update();
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...