在Chart.js中切斷泡泡

我遇到了圖表中最後一個泡泡切斷的問題。我需要一種擴展圖表的方式，以便顯示整個圓。我已經嘗試了一切，從添加額外的值到最後，以調整填充。似乎沒有任何工作。不幸的是，氣泡圖上的Chart JS文檔也嚴重缺乏。在Chart.js中切斷泡泡

var randomScalingFactor = function() { 
    return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); 
}; 
var randomColorFactor = function() { 
    return Math.round(Math.random() * 255); 
}; 
var randomColor = function() { 
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)'; 
}; 

var bubbleChartData = { 
    animation: { 
    duration: 10000 
    }, 
    datasets: [{ 
    label: "My First dataset", 
    backgroundColor: randomColor(), 
    data: [ 
     { 
     x: 10, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 20, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 30, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 40, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 50, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 60, 
     y: 0, 
     r: Math.abs(randomScalingFactor())/5, 
     }, { 
     x: 70, 
     y: 0, 
     r: 30, 
     }] 
    }] 
}; 

var ctx = document.getElementById('Chart').getContext('2d'); 
var chart = new Chart(ctx, { 
    type: 'bubble', 
    data: bubbleChartData 
})

的jsfiddle：https://jsfiddle.net/3dog0bec/

來源

2016-07-15 adam3039

您是否試圖增加x尺度？ – Nitin

或者在數據的末尾添加一個空的（零）值來創建額外的不可見氣泡，但這是一個破解 – Nitin

我曾嘗試在最後添加一個零值，但它仍然顯示爲非常小的氣泡。不理想。增加x尺度可能有用，有沒有關於這方面的任何文件？ – adam3039

我通過修改xAxes蜱最小值和最大值解決了這個問題。這有效，因爲我有一組數據要顯示，所以我只需將值設置爲比第一個數據點少10個，比上一個數據點多10個。

var chart = new Chart(ctx, { 
     type: 'bubble', 
     data: bubbleChartData, 
     options: { 
      scales: { 
       xAxes: [ 
       { 
        ticks: { 
         min: -10, 
         max: 100 
        } 
       }] 
      } 
     } 
    });

來源

2016-07-15 18:32:22 adam3039

在Chart.js中切斷泡泡

回答

相關問題