Как изменить ряд точечных линий LightningChart JS для достижения указанных функциональных возможностей? - PullRequest
Новая
       39

Как изменить ряд точечных линий LightningChart JS для достижения указанных функциональных возможностей?

0 голосов
/ 16 октября 2019

Я хотел создать XY-диаграмму с простой серией точечных линий. Для этого я начал опробовать программное обеспечение LightningChart JS от Arction. Несколько вопросов, на которые я хотел бы получить ответ, после создания ряда линий точек со свойствами по умолчанию:

  1. Как скрыть информационное окно, отображаемое на любой из осей вдольлинии курсора? Мы не хотим их, поскольку мы можем видеть информацию о xy уже в поле курсора.

  2. Как изменить цвет содержимого поля курсора?

  3. Как изменить заголовок содержимого поля курсора?

1 Ответ

3 голосов
/ 17 октября 2019
  1. Вы можете скрыть прямоугольник над осями, выбрав TickMarker для AutoCursor. Это можно сделать с помощью автокурсора диаграммы следующим образом: 
// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Dispose of the information box over the X and Y Axis respectively
    .disposeTickMarkerX()
    .disposeTickMarkerY()
)
Вы можете изменить стиль содержимого в поле курсора, изменив автокурсор диаграммы: 
// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Modify the ResultTable (i.e. cursor box)
    .setResultTable( rt => rt
        // Style the text inside the box
        .setTextFillStyle( fillStyle => fillStyle.setColor(ColorHEX('#996699') )
)

// Alternatively you can have the text inside the cursor box change color
// automatically depending on the hovered Series:

chart.setAutoCursor(cursor => cursor
    // Color the cursor box's text automatically based on hovered Series style.
    .setResultTableAutoTextStyle(true)
)
В поле «Курсор» по умолчанию используется название серии наведения в качестве заголовка. Вы можете изменить это, изменив ResultTable Formatter для Серии: 
// Modify the ResultTable Formatter for a Series.
lineSeries.setResultTableFormatter( ( builder, _, xValue, yValue ) => {
    return builder
        .addRow( 'Custom Title' )
        // Adding an empty string between the String and the xValue will align the
        // text nicely inside the box.
        .addRow( 'X Value:', '', xValue.toString() )
        // Alternatively, undefined can be used to align the text in the same manner
        // as with empty string.
        .addRow( 'Y Value:', undefined, yValue.toString() )
} )
...