Question

我正在尝试将插入符号添加到自定义html工具提示中。在documentation之后，给出以下示例：

if (target === 'web') {
  appConfig.output.filename = dev ? 'static/js/[name].js' : 'static/js/[name].[hash:8].js';
  appConfig.entry.vendor = [
        require.resolve('razzle/polyfills'),
        require.resolve('react'),
        require.resolve('react-dom'),
  ];
  appConfig.optimization = {
    splitChunks: {
      chunks: 'all',
      name: false
    }
  };
...

这些类从何而来？我找不到带有html工具提示和插入符号的演示。

谢谢

Answer 1

我不是 chart.js 的专家，但我最好的猜测是，这些是默认的饼图类（无法真正说明其他图表类型），它们会自动绘制插入符号工具提示取决于图表中切片当前的y轴位置，现在，如果您将其他任何图表类型与自定义HTML工具提示一起使用，则必须在样式定义中声明适用于该工具提示的一个或多个类。为此绘制插入符号，例如：

  #chartjs-tooltip {
       opacity: 1;
       position: absolute;
       background: rgba(0, 0, 0, .7);
       color: white;
       padding: 3px;
       border-radius: 3px;
       -webkit-transition: all .1s ease;
       transition: all .1s ease;
       pointer-events: none;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below {
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below:before {
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 0 8px 8px 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above {
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above:before {
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 8px 8px 0 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       top: 100%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }

将插入符/箭头添加到Chart.js自定义html工具提示

1 个答案: