Hiển thị giá trị ngoài biểu đồ hình tròn trong biểu đồ

Question

Khi tôi di chuột lên biểu đồ hình tròn, các giá trị được hiển thị trong chú giải công cụ. Tuy nhiên, tôi muốn hiển thị các giá trị bên ngoài biểu đồ hình tròn. Tôi muốn tạo biểu đồ như hình ảnh này: Cách thực hiện việc này?

Answer 1

Tôi có thể làm việc tương tự bằng cách sử dụng biểu đồ.js v2.3.0 sử dụng cả hai plugin API và extending chart types API. Bạn sẽ có thể thực hiện điều này như là một điểm khởi đầu và tinh chỉnh nó theo nhu cầu của bạn.

Dưới đây là hình thức sau khi được hiển thị.

Lưu ý, điều này đòi hỏi phải đào sâu vào chart.js internals và có thể phá vỡ nếu họ thay đổi cách tooltips được định vị hoặc kết xuất trong tương lai. Tôi cũng đã thêm tùy chọn cấu hình mới có tên là showAllTooltips để bật có chọn lọc bằng cách sử dụng plugin trên các biểu đồ nhất định. Điều này sẽ làm việc cho tất cả các loại biểu đồ, nhưng hiện tại tôi chỉ sử dụng nó cho biểu đồ bánh, bánh rán, quầy bar và đường kẻ.

Với điều đó đã nói, đây là giải pháp làm việc cho hình ảnh ở trên.

Chart.plugins.register({ 
    beforeRender: function (chart) { 
    if (chart.config.options.showAllTooltips) { 
     // create a namespace to persist plugin state (which unfortunately we have to do) 
     if (!chart.showAllTooltipsPlugin) { 
     chart.showAllTooltipsPlugin = {}; 
     } 

     // turn off normal tooltips in case it was also enabled (which is the global default) 
     chart.options.tooltips.enabled = false; 

     // we can't use the chart tooltip because there is only one tooltip per chart which gets 
     // re-positioned via animation steps.....so let's create a place to hold our tooltips 
     chart.showAllTooltipsPlugin.tooltipsCollection = []; 

     // create a tooltip for each plot on the chart 
     chart.config.data.datasets.forEach(function (dataset, i) { 
     chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
      // but only create one for pie and doughnut charts if the plot is large enough to even see 
      if (!_.contains(['doughnut', 'pie'], sector._chart.config.type) || sector._model.circumference > 0.1) { 
      var tooltip; 

      // create a new tooltip based upon configuration 
      if (chart.config.options.showAllTooltips.extendOut) { 
       // this tooltip reverses the location of the carets from the default 
       tooltip = new Chart.TooltipReversed({ 
       _chart: chart.chart, 
       _chartInstance: chart, 
       _data: chart.data, 
       _options: chart.options.tooltips, 
       _active: [sector] 
       }, chart); 
      } else { 
       tooltip = new Chart.Tooltip({ 
       _chart: chart.chart, 
       _chartInstance: chart, 
       _data: chart.data, 
       _options: chart.options.tooltips, 
       _active: [sector] 
       }, chart); 
      } 

      // might as well initialize this now...it would be a waste to do it once we are looping over our tooltips 
      tooltip.initialize(); 

      // save the tooltips so they can be rendered later 
      chart.showAllTooltipsPlugin.tooltipsCollection.push(tooltip); 
      } 
     }); 
     }); 
    } 
    }, 

    afterDraw: function (chart, easing) { 
    if (chart.config.options.showAllTooltips) { 
     // we want to wait until everything on the chart has been rendered before showing the 
     // tooltips for the first time...otherwise it looks weird 
     if (!chart.showAllTooltipsPlugin.initialRenderComplete) { 
     // still animating until easing === 1 
     if (easing !== 1) { 
      return; 
     } 

     // animation is complete, let's remember that fact 
     chart.showAllTooltipsPlugin.initialRenderComplete = true; 
     } 

     // at this point the chart has been fully rendered for the first time so start rendering tooltips 
     Chart.helpers.each(chart.showAllTooltipsPlugin.tooltipsCollection, function (tooltip) { 
     // create a namespace to persist plugin state within this tooltip (which unfortunately we have to do) 
     if (!tooltip.showAllTooltipsPlugin) { 
      tooltip.showAllTooltipsPlugin = {}; 
     } 

     // re-enable this tooltip otherise it won't be drawn (remember we disabled all tooltips in beforeRender) 
     tooltip._options.enabled = true; 

     // perform standard tooltip setup (which determines it's alignment and x, y coordinates) 
     tooltip.update(); // determines alignment/position and stores in _view 
     tooltip.pivot(); // we don't actually need this since we are not animating tooltips, but let's be consistent 
     tooltip.transition(easing).draw(); // render and animate the tooltip 

     // disable this tooltip in case something else tries to do something with it later 
     tooltip._options.enabled = false; 
     }); 
    } 
    }, 
}); 

// A 'reversed' tooltip places the caret on the opposite side from the current default. 
// In order to do this we just need to change the 'alignment' logic 
Chart.TooltipReversed = Chart.Tooltip.extend({ 
    // Note: tooltipSize is the size of the box (not including the caret) 
    determineAlignment: function(tooltipSize) { 
    var me = this; 
    var model = me._model; 
    var chart = me._chart; 
    var chartArea = me._chartInstance.chartArea; 

    // set caret position to top or bottom if tooltip y position will extend outsite the chart top/bottom 
    if (model.y < tooltipSize.height) { 
     model.yAlign = 'top'; 
    } else if (model.y > (chart.height - tooltipSize.height)) { 
     model.yAlign = 'bottom'; 
    } 

    var leftAlign, rightAlign; // functions to determine left, right alignment 
    var overflowLeft, overflowRight; // functions to determine if left/right alignment causes tooltip to go outside chart 
    var yAlign; // function to get the y alignment if the tooltip goes outside of the left or right edges 
    var midX = (chartArea.left + chartArea.right)/2; 
    var midY = (chartArea.top + chartArea.bottom)/2; 

    if (model.yAlign === 'center') { 
     leftAlign = function(x) { 
     return x >= midX; 
     }; 
     rightAlign = function(x) { 
     return x < midX; 
     }; 
    } else { 
     leftAlign = function(x) { 
     return x <= (tooltipSize.width/2); 
     }; 
     rightAlign = function(x) { 
     return x >= (chart.width - (tooltipSize.width/2)); 
     }; 
    } 

    overflowLeft = function(x) { 
     return x - tooltipSize.width < 0; 
    }; 
    overflowRight = function(x) { 
     return x + tooltipSize.width > chart.width; 
    }; 
    yAlign = function(y) { 
     return y <= midY ? 'bottom' : 'top'; 
    }; 

    if (leftAlign(model.x)) { 
     model.xAlign = 'left'; 

     // Is tooltip too wide and goes over the right side of the chart.? 
     if (overflowLeft(model.x)) { 
     model.xAlign = 'center'; 
     model.yAlign = yAlign(model.y); 
     } 
    } else if (rightAlign(model.x)) { 
     model.xAlign = 'right'; 

     // Is tooltip too wide and goes outside left edge of canvas? 
     if (overflowRight(model.x)) { 
     model.xAlign = 'center'; 
     model.yAlign = yAlign(model.y); 
     } 
    } 
    } 
});