标签中的 addrow 样式

问题描述

我正在添加如下所示的自定义表单

return builder
        .addRow(name)
        .addRow(price)

无论如何要设置行的样式吗？我想用大字体和不同颜色显示价格。

谢谢。

解决方法

除了文本内容之外，没有现有的内置方法来自定义结果表的每一行/列。

这绝对是我们最终会包含在库中的功能，只要它成为优先事项或客户要求它。

现在，作为社区用户，可以通过创建自定义光标来完成。不幸的是，关于这个主题的例子并不多。 总体思路是使用 ChartXY.solveNearest（或通过某种自定义方法计算）求解离鼠标位置最近的数据点，并根据需要使用 UI 元素和自定义刻度显示自定义光标。

ResultTable 可以通过组合 Column 和 Row 布局来创建网格，然后添加 TextBox 元素，您可以单独设置其字体/颜色的样式。

编辑：自定义游标的官方示例已经发布。 你可以在那里找到它们https://www.arction.com/lightningchart-js-interactive-examples/search.html?t=cursor

有一个使用 LCJS UI 元素的示例，另一个使用动态 HTML 和 CSS（相同的方法可用于某些外部 UI 框架）。

,

这是一个简单的自定义 autoCursor 示例

// Extract required parts from LightningChartJS.
const {
  lightningChart,AutoCursorModes,UIElementBuilders,UILayoutBuilders,UIBackgrounds,ColorHEX,SolidFill,SolidLine,UIOrigins,translatePoint,} = lcjs;

// Import data-generator from 'xydata'-library.
const {
  createProgressiveTraceGenerator
} = xydata

// colors of the series
const colors = ["#fc03f0","#1cb843","#eeff00","#0955ff","#500c3f"];

// Create a XY Chart.
const chart = lightningChart()
  .ChartXY({
    // theme: Themes.dark
  })
  // Disable native AutoCursor to create custom
  .setAutoCursorMode(AutoCursorModes.disabled)
  .setTitle("Custom Cursor using LCJS UI");

// set title for Y axis
chart.getDefaultAxisY().setTitle("Y-axis");

// generate data and creating the series
  const series = chart.addLineSeries().setStrokeStyle(
    new SolidLine({
      fillStyle: new SolidFill({ color: ColorHEX(colors[0]) }),thickness: 2,})
  );

  createProgressiveTraceGenerator()
    .setNumberOfPoints(200)
    .generate()
    .toPromise()
    .then((data) => {
      return series.add(data);
    });

// Create UI elements for custom cursor.
const resultTable = chart
  .addUIElement(
    UILayoutBuilders.Column.setBackground(UIBackgrounds.Rectangle),{
      x: chart.getDefaultAxisX(),y: chart.getDefaultAxisY(),}
  )
  .setMouseInteractions(false)
  .setOrigin(UIOrigins.LeftBottom)
  .setMargin(2)
  .setBackground((background) =>
    background.setStrokeStyle(
      new SolidLine({
        thickness: 1,fillStyle: new SolidFill({ color: ColorHEX("#c9bab9") }),})
    )
  );

const rowX = resultTable
  .addElement(UILayoutBuilders.Row)
  .addElement(UIElementBuilders.TextBox)
  .setTextFont((font) => font.setSize(15))
  .setTextFillStyle(new SolidFill({ color: ColorHEX(colors[1]) }));

const rowY = resultTable
    .addElement(UILayoutBuilders.Row)
    .addElement(UIElementBuilders.TextBox)
    .setTextFont((font) => font.setSize(15))
    .setTextFillStyle(new SolidFill({ color: ColorHEX(colors[2]) }));


// Hide custom cursor components initially.
resultTable.dispose();

// Implement custom cursor logic with events.
chart.onSeriesBackgroundMouseMove((_,event) => {
  const mouseLocationClient = { x: event.clientX,y: event.clientY };
  // Translate mouse location to LCJS coordinate system for solving data points from series,and translating to Axes.
  const mouseLocationEngine = chart.engine.clientLocation2Engine(
    mouseLocationClient.x,mouseLocationClient.y
  );

  // Translate mouse location to Axis.
  const mouseLocationAxis = translatePoint(
    mouseLocationEngine,chart.engine.scale,series.scale
  );

  // Solve nearest data point to the mouse on each series.
  const nearestDataPoints = series.solveNearestFromScreen(mouseLocationEngine)

  if (nearestDataPoints) {
    // Set custom cursor location.
    resultTable.setPosition({
      x: nearestDataPoints.location.x,y: nearestDataPoints.location.y,});

  // set Origin of resultTable
  if ( nearestDataPoints.location.x > chart.getDefaultAxisX().getInterval().end / 1.5 ) {
    if (nearestDataPoints.location.y >chart.getDefaultAxisY().getInterval().end / 1.5) {
      resultTable.setOrigin(UIOrigins.RightTop);
    } else {
      resultTable.setOrigin(UIOrigins.RightBottom);
    }
  } else if ( nearestDataPoints.location.y > chart.getDefaultAxisY().getInterval().end / 1.5) {
    resultTable.setOrigin(UIOrigins.LeftTop);
  } else {
    resultTable.setOrigin(UIOrigins.LeftBottom);
  }

    // Format result table text.
    rowX.setText(`X: ${nearestDataPoints.location.x.toFixed(1)}`);
    rowY.setText(`Y: ${nearestDataPoints.location.y.toFixed(1)}`)
    // Display cursor.
    resultTable.restore();
  } else {
    // Hide cursor.
    resultTable.dispose();
  }
});

chart.onSeriesBackgroundMouseLeave((_,e) => {
  resultTable.dispose();
});

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>