Question

我尝试使用Chart.js2中的圆环图显示一些数据。

我目前的图表如下：

我想要的输出必须显示另一个属性，即百分比，如下所示：

我已经阅读了文档，但我无法解决这个问题，因为它非常通用，而且我是JavaScript的新手。

第一张图表的代码如下：

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ]
      }]
    };

Answer 1

您可以使用图表选项工具提示配置部分自定义工具提示，如下所述：http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

如下面的示例代码所示，您可以更改颜色，大小调整和样式等内容。查看上面链接的文档以获取可配置选项的完整列表。

如果要将百分比添加到工具提示显示中，可以使用tooltip callbacks。该文档包含所有可能的可自定义回调字段的列表。

在下面的示例中，我将“title”设置为显示标签名称，将“label”设置为显示值，并将百分比添加到“afterLabel”。

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});

使用JSFiddle：https://jsfiddle.net/m7s43hrs/

Answer 2

根据@Tot Zam的回答，但为了简洁起见使用箭头功能：

options: {
  tooltips: {
    callbacks: {
      title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
      label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
    }
  }
}

Answer 3

感谢 Tuhin 的回答。它帮助我弄清楚如何使用回调函数更改工具提示标题。

我对 javascript 很陌生，所以从 Chart.js 3.4.1 文档中我不清楚如何使用工具提示对象。按照建议，通过使用 console.log(tooltipItems)，我能够获得所需的信息。

我最终得到了一个配置对象，在 options.plugins 中设置了以下回调。我希望将缩短的日期字符串显示为工具提示的标题。使用 toDateString() 可以解决问题。

以下是我设置回调的方法：

    options: {
      ...

      plugins: {
        tooltip: {
          callbacks: {
            title: tooltipItems => {
              title = tooltipItems[0].parsed.x
              if (title !== null) {
                console.dir(title)
                title = new Date(title).toDateString()
              }
              return title
            },
          },
        },
      },
    },

Answer 4

任何人都希望在 2021 年寻找解决方案以将标签设置为工具提示的标题，下面的代码片段有效。使用console.dir(tooltipItems)查看tooltipItems的内容。

Size oldSize = listView1.ClientSize;
int hScrollBarHeight = SystemInformation.HorizontalScrollBarHeight

// Both wParam and lParam set to -1: include all Items and full size
int approxSize = NativeMethods.SendMessage(
    listView1.Handle, NativeMethods.LVM_APPROXIMATEVIEWRECT, -1, (-1 << 16 | -1));
int approxHeight = approxSize >> 16;
int approxWidth = approxSize & 0xFFFF;

Size newSize = new Size(approxWidth, approxHeight - hScrollBarHeight);

// If needed, resize the Form (here, grow and shrink) to adapt to the new size
// Checking the Dock property state is a possible example, apply whatever logic fits
if (listView1.Dock != DockStyle.None) {
    this.Height += newSize.Height - oldSize.Height;
    this.Width += newSize.Width - oldSize.Width;
}

listView1.ClientSize = newSize;

internal class NativeMethods 
{
    internal const int LVM_FIRST = 0x1000;
    internal const int LVM_APPROXIMATEVIEWRECT = LVM_FIRST + 0x40;

    [DllImport("user32.dll", CharSet = CharSet.Unicode, SetLastError = true)]
    internal static extern int SendMessage(IntPtr hWnd, int uMsg, int wParam, int lParam);
}

如何自定义Chart.js 2.0 Donut Chart的工具提示？

4 个答案: