Chartjs 3 工具提示样式未被拾取

Question

我正在尝试自定义 chartjs 工具提示，但未采用该样式。我正在关注这里的文档 Chartjs Tooltip Documentation

除工具提示外，所有其他配置都在选择中。我目前正在使用 Google Chrome 并且我已经在 Firefox 中尝试过，但仍然没有反映出来。我也硬刷新了一下还是一样

这是我的javascript。

const ctx = document.getElementById('numChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'This Week',
            data: [{ x: '5', y: 5000 }, { x: '10', y: 100000 }, { x: '15', y: 5000 }, { x: '20', y: 200000 },
            { x: '30', y: 100000 }, { x: '35', y: 5000 }],
            // green line color
            borderColor: 'rgba(34, 195, 107, 1)',
            // line smoothness
            lineTension: 0.4,
            //hide points
            pointRadius: 3,
            //increase the width of the line
            borderWidth: 6
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: "Balance",
                    font: {
                        size: 12,
                        family: "'Urbanist', sans-serif",
                    },
                },
                suggestedMin: 0,
                suggestedMax: 300000,
                grid: {
                    color: 'rgb(33,34,37)'
                },
                ticks: {
                    callback: function (value, index, ticks) {
                        //adds the commas and the dollar sign
                        return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
                    }
                }
            },
            x: {
                beginAtZero: true,
                position: 'bottom',
                title: {
                    suggestedMin: 0,
                    suggestedMax: 50,
                },
                grid: {
                    display: false
                }
            }
        },
        plugins: {
            legend: {
                display: true,
                align: "end",
                labels: {
                    usePointStyle: true,
                    boxWidth: 4
                }
            },
            autocolors: false,
            title: {
                display: true,
                text: "Purchases per month",
                align: "start",
                color: "#ffff",
                font: {
                    size: 18,
                    weight: 700,
                    lineHeight: 2
                },
                padding: {
                    bottom: 20
                }
            },
            tooltips: {
                mode: 'nearest',
                backgroundColor: '#fff',
                displayColors: false
            }
        }

    }
});

Answer 1

如第一句所述，命名空间是 options.plugins.tooltip，而您将它放在 options.tooltips 中，这是 V2 语法，因此不会起作用，更改它可以解决您的问题。

const ctx = document.getElementById('numChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'This Week',
      data: [{
          x: '5',
          y: 5000
        }, {
          x: '10',
          y: 100000
        }, {
          x: '15',
          y: 5000
        }, {
          x: '20',
          y: 200000
        },
        {
          x: '30',
          y: 100000
        }, {
          x: '35',
          y: 5000
        }
      ],
      // green line color
      borderColor: 'rgba(34, 195, 107, 1)',
      // line smoothness
      lineTension: 0.4,
      //hide points
      pointRadius: 3,
      //increase the width of the line
      borderWidth: 6
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: "Balance",
          font: {
            size: 12,
            family: "'Urbanist', sans-serif",
          },
        },
        suggestedMin: 0,
        suggestedMax: 300000,
        grid: {
          color: 'rgb(33,34,37)'
        },
        ticks: {
          callback: function(value, index, ticks) {
            //adds the commas and the dollar sign
            return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
          }
        }
      },
      x: {
        beginAtZero: true,
        position: 'bottom',
        title: {
          suggestedMin: 0,
          suggestedMax: 50,
        },
        grid: {
          display: false
        }
      }
    },
    plugins: {
      tooltip: {
        mode: 'nearest',
        backgroundColor: '#fff',
        displayColors: false
      },
      legend: {
        display: true,
        align: "end",
        labels: {
          usePointStyle: true,
          boxWidth: 4
        }
      },
      autocolors: false,
      title: {
        display: true,
        text: "Purchases per month",
        align: "start",
        color: "#ffff",
        font: {
          size: 18,
          weight: 700,
          lineHeight: 2
        },
        padding: {
          bottom: 20
        }
      },
    }
  }
});

Chartjs 3 工具提示样式未被拾取

Chartjs 3 ToolTip styling is not being picked up

javascript

chart.js