Apex 图表 - 标签的换行符

Question

我在 javascript

中得到以下结果

return label + sy + ' - ' + ey

但我想将结果显示为

return label NEWLINE sy + ' - ' + ey

我想在浏览器中分两行显示数据，标签是名称，sy 和 ey 的值是日期

<script type="text/babel">
                              class ApexChart extends React.Component {
                                constructor(props) {
                                  super(props);

                                  this.state = {
                                  
                                    series: [
                                      {
                                        data: [
                                        
                                          
                                                            
                                        
                                            {
                                                x: 'Test 1',
                                                y: [
                                                  new Date('2019-05-15').getTime(),
                                                  new Date('2022-05-15').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 2',
                                                y: [
                                                  new Date('2020-09-23').getTime(),
                                                  new Date('2024-09-23').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 3',
                                                y: [
                                                  new Date('2018-02-10').getTime(),
                                                  new Date('2023-02-10').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 4',
                                                y: [
                                                  new Date('2020-02-10').getTime(),
                                                  new Date('2024-02-10').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 5',
                                                y: [
                                                  new Date('2020-01-01').getTime(),
                                                  new Date('2024-01-01').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            }                   
                                                                                  
                                        ]
                                      }
                                    ],
                                    options: {
                                      chart: {
                                        height: 3060,
                                        type: 'rangeBar'
                                      },
                                      plotOptions: {
                                        bar: {
                                          horizontal: true,
                                          distributed: true,
                                          rangeBarOverlap: false,
                                          dataLabels: {
                                            hideOverflowingLabels: false
                                          }
                                        }
                                      },
                                      dataLabels: {
                                        enabled: true,
                                        formatter: function(val, opts) {
                                          var label = opts.w.globals.labels[opts.dataPointIndex]
                                          var a = moment(val[0])
                                          var b = moment(val[1])
                                          
                                          var sy = a.format('L')
                                          var ey = b.format('L')
                                          return label +  sy + ' - ' + ey
                                        },
                                        style: {
                                          colors: ['#f3f4f5', '#fff']
                                        }
                                      },
                                      xaxis: {
                                        type: 'datetime'
                                      },
                                      yaxis: {
                                        show: false
                                      },
                                      grid: {
                                        row: {
                                          colors: ['#f3f4f5', '#fff'],
                                          opacity: 1
                                        }
                                      }
                                    },
                                  
                                  
                                  };
                                }

                                render() {
                                  return (
                                    <div>
                                      <div id="chart">
                                        <ReactApexChart options={this.state.options} series={this.state.series} type="rangeBar" height={3060} />
                                      </div>
                                      <div id="html-dist"></div>
                                    </div>
                                  );
                                }
                              }

                              const domContainer = document.querySelector('#app');
                              ReactDOM.render(React.createElement(ApexChart), domContainer);
                            </script>

Answer 1

对于浏览器换行符是 <br/> 其余大部分是 \n，相应地使用

return label + "<br/>" + sy + ' - ' + ey

或

return label + "\n" + sy + ' - ' + ey

更新：

您似乎正在使用带有 React 的顶点图表，它似乎不支持标签的 html 标签。

来自此处的文档

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

这里有一个相关问题

https://github.com/apexcharts/apexcharts.js/issues/640#issuecomment-578017547

尝试返回数组，看看是否有效

像这样尝试

return [label, sy + ' - ' + ey]

Answer 2

您可以将它们放入单独的 <p> 元素中。

例如，你可以有这样的东西：

//make the output as text
var output = "<p>" + label + "</p><p>" + sy + " - " + ey + "</p>";

//create and add the element to the HTML
var outputElement = document.createElement("div");
outputElement.innerHTML = output;
document.body.appendChild(outputElement);

所以结果是：

<p>[label]</p>
<p>[sy] - [ey]</p>

在HTML中，不同的<p>元素放在不同的行上。