Добавление изображения внутри точек Linechart в ChartJs

Я разрабатываю проект с использованием ChartJ. Я пытаюсь добавить изображение значка внутри строки, а не точки.

Im прикрепляет изображение, которое я объяснил вышеизложенным требованиям. На этом изображении есть изображение chartjs и изображение refernce. Я хотел бы добавить изображение внутри линейной диаграммы chartjs точно так же, как в эталонном изображении (значок солнца и облака).

Возможно ли это в chartjs. Im с нетерпением ждет решения. Любая помощь или предложение были бы оценены.

Ответы

Ответ 1

Как сказано в структуре диаграмм диаграмм Chart.js (атрибут pointStyle):

pointStyle
String, Array <String> , Image, Array < Изображение >
Стиль точки. Возможные варианты: "круг", "треугольник", "прямой", "прямой", "крест", "крест", "звезда", "линия" и "тире". Если параметр является изображением, это изображение рисуется на холсте с помощью drawImage.

Итак, вам просто нужно отредактировать диаграмму и поместить изображение вместо стандартного circle в атрибут pointStyle определенных данных.

Вы можете сделать это с помощью плагинов Chart.js следующим образом:

// Variables 'sun' and 'cloud' are created before with `new Image()`

Chart.pluginService.register({
    afterUpdate: function(chart) {
        chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun;
        chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud;
    }
});

И даст вам этот результат.