Question

当我删除一个片段时，我正在尝试更新我的甜甜圈chart.js的居中值。在我的情况下：

因此数字46不会改变。它是通过数据集的数字之和得到的。所以我想：当我删除一个图例标签时，我的数据集将不会更新，只会更新我的图形设计。我想改变那个居中的数字。这段代码是我设置居中值的方式：

         Chart.pluginService.register({
        beforeDraw: function (chart) {
            var me = this;
            var opts = me.options;
            if (chart.config.options.title) {
                var ctx = chart.chart.ctx;
                ctx.align = 'left';
            }
            /* function removeData(chart) {
                 console.log('ciao')
                 chart.data.labels.pop();
                 chart.data.datasets.forEach((dataset) => {
                     dataset.data.pop();
                 });
                 chart.update();
             }
             var segments = chart.segments;
             for (var index = 0; index < segments.length; index++) {
                 if (activeLabel == segments[index].label) {
                     myChart.removeData(index);
                 }
             }*/

            if (chart.config.options.elements.center) {
                //Get ctx from string
                var ctx = chart.chart.ctx;
                //Get options from the center object in options
                var centerConfig = chart.config.options.elements.center;
                var fontStyle = centerConfig.fontStyle || 'Arial';
                var txt = centerConfig.text;
                var color = centerConfig.color || '#000';
                var sidePadding = centerConfig.sidePadding || 20;
                var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
                //Start with a base font of 30px
                ctx.font = "45px " + fontStyle;

                //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
                var stringWidth = ctx.measureText(txt).width;
                var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

                // Find out how much the font can grow in width.
                var widthRatio = elementWidth / stringWidth;
                var newFontSize = Math.floor(30 * widthRatio);
                var elementHeight = (chart.innerRadius * 2);

                // Pick a new font size so it will not be larger than the height of label.
                //var fontSizeToUse = Math.min(newFontSize, elementHeight);
                var fontSizeToUse = centerConfig.fontSizeToUse;
                //Set font settings to draw it correctly.
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
                var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
                ctx.font = fontSizeToUse + "px " + fontStyle;
                ctx.fillStyle = color;

                //Draw text in center
                ctx.fillText(txt, centerX, centerY);
            }
        },
        afterUpdate: function (update) {

            update.config.options.elements.center.text = bloccoUno[0];
            console.log('afterUpdate: ' + update.config.options.elements.center.text);
        },
        afterLayout: function (update) {
            console.log('afterLayout: ' + update);
        },
        afterDatasetsUpdate: function (update) {
            console.log('afterDatasetsUpdate: ' + update);
        },
        afterDatasetUpdate: function (update) {
            console.log('afterDatasetUpdate: ' + update);
        }

    });

这就是我如何定义需要居中的WHICH号码：

      self.blocks[0].elenco[1].doughnutChartOptions['elements'] =
        {
            center: {
                text: self.blocks[0].elenco[1].numero,
                fontSizeToUse: 40,
                color: '#26313E', //Default black
                fontStyle: 'Helvetica', //Default Arial
                sidePadding: 15 //Default 20 (as a percentage)
            }
        };

doughnutChartOptions只是我的chart.js选项。那么......如何在删除时更改该数字（数据集/图例值中的数据总和）（这是chart.js的默认函数）是图例中的一个元素？我尝试了没有结果来拦截这个删除，但是没有用。

对不起我的英语，感谢所有人：）

Charts.js - 单击（默认：删除）段时需要更新居中值

0 个答案: