Пузырьковая диаграмма Chart.js pointStyle не работает

Я работаю с пузырьковой диаграммой chart.js. Я пытаюсь изменить pointStyle с круга на что-то другое. Я пробовал все на основе документации и до сих пор не могу заставить его работать. Может кто-нибудь помочь понять, что я сделал не так?

Chart.defaults.global.elements.point.pointStyle = 'star';
Chart.defaults.global.elements.point.backgroundColor = 'rgba(255,255,255,1)';

Chart.defaults.global.elements.point.radius = 20;

var data = {
datasets:[{
        pointStyle:      'triangle',
        //pointRadius:     8,
//          data:[ 27, 33, 49 ],
        data:[{ x:0, y: 0}]
    }]
};
var options = {
                responsive: true,
                title:{
                    display:true,
                    text:'Chart.js Bubble Chart'
                },
                tooltips: {
                    mode: 'point'
                }
            };
var canvas = document.getElementById('myChart');

var myBubbleChart = new Chart(canvas,{
type: 'bubble',
data: data,
options: options
});0

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

https://jsfiddle.net/charleschiu/h31vfgnq/

Спасибо


javascript charts chart.js bubble-chart
person Chuck    schedule 07.06.2017    source источник
comment
Это может быть ошибка. Возможно, вы могли бы создать задачу на: github.com/chartjs/Chart.js   -  person Raquel Guimarães    schedule 07.06.2017
comment
Да, блокировать мой вперед всю ночь. Создаст для него ошибку. Спасибо   -  person Chuck    schedule 07.06.2017

Ответы (1)


arrow_upward
2
arrow_downward

Очевидно, что это не сработает, так как pointStyle применимо только к линейной диаграмме (на которой есть точки для наведения курсора). К сожалению, для этого также нет встроенных опций.

Однако это облако может быть достигнуто каким-то хакерским способом, то есть переопределением фактической draw функции пузырьковой диаграммы.

ᴏᴠᴇʀʀɪᴅᴇ ᴛʜᴇ ᴅʀᴀᴡ ꜰᴜɴᴄᴛɪᴏɴ ᴏꜰ ʙᴜʙʙʟᴇ ᴄʜᴀʀᴛ

Chart.controllers.bubble.prototype.draw = function() {
   let c = this.chart; // chart instance
   let datasets = c.data.datasets; // datasets array
   datasets.forEach(function(e, i) { // loop through the datasets array
      let isHidden = e._meta[0].hidden; // dataset's hidden property
      if (!isHidden) { // if dataset is not hidden
         let data = c.getDatasetMeta(i).data; // coords array of bubble
         data.forEach(function(e) { // loop through the coords array
            let ctx = c.chart.ctx; // canvas context
            let x = e._model.x; // x coord of bubble
            let y = e._model.y; // y coord of bubble
            let r = e._model.radius; // radius of bubble
            let bgColor = e._model.backgroundColor; // background color of bubble

            /** draw anything using general canvas methods **/
            // draw a triangle
            ctx.save();
            ctx.moveTo(x, y - r);
            ctx.lineTo(x + r, y + r);
            ctx.lineTo(x - r, y + r);
            ctx.closePath();
            ctx.fillStyle = bgColor;
            ctx.fill();
            ctx.restore();
         });
      }
   });
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.controllers.bubble.prototype.draw = function() {
   let c = this.chart; // chart instance
   let datasets = c.data.datasets; // datasets array
   datasets.forEach(function(e, i) { // loop through the datasets array
      let isHidden = e._meta[0].hidden; // dataset's hidden property
      if (!isHidden) { // if dataset is not hidden
         let data = c.getDatasetMeta(i).data; // coords array of bubble
         data.forEach(function(e) { // loop through the coords array
            let ctx = c.chart.ctx; // canvas context
            let x = e._model.x; // x coord of bubble
            let y = e._model.y; // y coord of bubble
            let r = e._model.radius; // radius of bubble
            let bgColor = e._model.backgroundColor; // background color of bubble

            /** draw anything using general canvas methods **/
            // draw a triangle
            ctx.save();
            ctx.moveTo(x, y - r);
            ctx.lineTo(x + r, y + r);
            ctx.lineTo(x - r, y + r);
            ctx.closePath();
            ctx.fillStyle = bgColor;
            ctx.fill();
            ctx.restore();
         });
      }
   });
}

var data = {
   datasets: [{
      label: 'Dataset 1',
      data: [
        { x: 6, y: 6, r: 10 },
        { x: 12, y: 12, r: 15 }
      ],
      backgroundColor: '#07C'
   }]
};
var options = {
	responsive: false,
   scales: {
      xAxes: [{ ticks: { min: 0, max: 20 } }],
      yAxes: [{ ticks: {  min: 0, max: 20 } }]
   },
   title: {
      display: true,
      text: 'Chart.js Bubble Chart'
   }
};

var canvas = document.getElementById('myChart');
var myBubbleChart = new Chart(canvas, {
   type: 'bubble',
   data: data,
   options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<canvas id="myChart" width="350" height="200"></canvas>

person ɢʀᴜɴᴛ    schedule 07.06.2017