C3JS JSX语法在渲染工具提示html

C3JS JSX syntax on render for tooltip html

本文关键字：工具提示 html JSX 语法 C3JS      更新时间：2023-09-26

我有一个使用动态工具提示的应用程序，它必须根据图形上的值改变设计，但是将内部HTML添加到工具提示的内容中很难重构，因为我对工具提示进行了许多设计，包括许多条件和变量

我尝试导入一个组件，但是content函数只期望一个带有HTML

的字符串

所以我想知道是否有可能添加JSX语法或添加一个react组件来渲染工具提示的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
      }
    }

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

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

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

但是你仍然可以使用template literal来实现同样的事情:工作小提琴: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}那样在字符串中放入变量。你也可以把这个字符串分成多行，这样更容易读(它也会保留所有的换行，如果你记录它)

相关文章：