工具提示渲染时的 C3JS JSX 语法 html

Question

好吧，我有一个使用动态工具提示的应用程序，这必须根据图表上的值更改设计，但是很难将内部 html 添加到工具提示的内容中重构，因为我有很多工具提示设计成许多条件和变量

我尝试导入一个组件，但内容函数只需要一个带有 html

的字符串

所以我想知道是否可以添加 jsx 语法或添加一个反应组件来将工具提示的 html 渲染到 c3

的内容中

 data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    },
    tooltip: {
      contents: function () {
                // call a function that return a react component
      }
    }

Answer 1

您可以使用 ReactDomServer.renderToString 渲染此 https://www.npmjs.com/package/react-dom#react-domserver

但是我不确定这是否是一个好的解决方案，它不是为此目的而设计的。（如果你检查控制台，你可以看到仍然有错误）。

这里是 fiddle 在 c3js 工具提示中使用 React 组件。 http://jsfiddle.net/uqh2679x/

但是您仍然可以使用模板字面量实现相同的目的：工作 fiddle：http://jsfiddle.net/z7evqpnL/

tooltip: {
    contents: (data) => `
        <div class="tooltip">
            <div class="title">${customText}</div>
            <div>Data1: ${data[0].value}</div>
            <div>Data2: ${data[1].value}</div>
        </div>`
    }
}

当您使用 `` 时，您可以像上面的 ${variable} 一样将变量放入字符串中。您也可以将此字符串分成多行，以使其更具可读性（如果您将其记录下来，它还将保留所有换行符）

工具提示渲染时的 C3JS JSX 语法 html

C3JS JSX syntax on render for tooltip html

javascript

reactjs

c3.js