Question

我正在使用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

我可以对折线图进行更改，但似乎无法通过气泡图更改pointStyle。

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

由于

Answer 1

显然，这不会起作用，因为 pointStyle 仅适用于折线图（有点悬停）。不幸的是，没有任何本地选择来实现这一目标。

但是，这种云可以通过某种 hackish 方式实现，即覆盖气泡图的实际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>

Chart.js气泡图pointStyle不起作用

1 个答案: