Как изменить метки маркеров в горизонтальном датчике anychart?

Я использую anychart для создания процентного горизонтального датчика.

И я хочу изменить информацию маркера, чтобы показать, что я хочу.

Я ничего не нашел в документации об этом.

Я использую игровую площадку javascript anychart (ссылка ниже). Окончательная реализация находится на Angular 5.

Исходный код: https://playground.anychart.com/docs/v8/samples/GAUGE_Linear_04

(Необязательно) Метод машинописного текста:

createAnyChartsCustomGauges() {
let array = [];
    this.listItem.forEach(item => {
      // Gauge type and data
      const gauge = anychart.gauges.linear();
      gauge.layout('horizontal');
      // Set the data
      gauge.data([item.percent]); //number

      // Create the custom scale bar
      const scaleBarre = gauge.scaleBar(0);
      // color and style setting
      const colorScale = anychart.scales.ordinalColor().ranges([
        {
          from: 0,
          to: 25,
          color: ['#D81E05', '#EB7A02'],
        },
        {
          from: 25,
          to: 50,
          color: ['#EB7A02', '#FFD700'],
        },
        {
          from: 50,
          to: 75,
          color: ['#FFD700', '#CAD70b'],
        },
        {
          from: 75,
          to: 100,
          color: ['#CAD70b', '#2AD62A'],
        },
      ]);
      scaleBarre.width('5%');
      scaleBarre.offset('31.5%');
      scaleBarre.colorScale(colorScale);

      // Add a marker pointer
      const marker = gauge.marker(0);
      marker.offset('31.5%');
      marker.type('triangle-up');
      marker.zIndex(10);
      marker.labels().format('{%data[0]}%');
      // Add a scale
      const scale = gauge.scale();
      scale.minimum(0);
      scale.maximum(100);
      scale.maxTicksCount(10);

      // Add an axis
      const axis = gauge.axis();
      axis.minorTicks(true);
      axis.minorTicks().stroke('#cecece');
      axis.width('1%');
      axis.offset('29.5%');
      axis.orientation('top');

      // format axis labels
      axis.labels().format('{%value}%');

      // set paddings
      gauge.padding([0, 20]);

      array.push(gauge);

    });
  }

Фактическое: { Pointer 0 Value 63 }

Ожидается: { Значение 63 % }


javascript angular anychart
person Paulolafoudre    schedule 31.07.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

@gugateider был абсолютно прав! Кроме того, если вы не хотите использовать стили HTML для всплывающей подсказки и отключить заголовок всплывающей подсказки и разделитель, вы можете использовать приведенный ниже код:

  gauge.tooltip().title(false);
  gauge.tooltip().separator(false);
  gauge.tooltip().format("Value: {%value}%");
person AnyChart Support    schedule 01.08.2019
comment
Здравствуйте, большое спасибо! Ваше решение отлично работает на моем примере! :) - person Paulolafoudre; 01.08.2019

arrow_upward
1
arrow_downward

Вы должны использовать format() методы класса Tooltip. Аналогичный пример есть на любой игровой площадке с диаграммами.

// enable HTML for tooltips
chart.tooltip().useHtml(true);

// tooltip settings
var tooltip = gauge.tooltip();
tooltip.positionMode("point");
tooltip.format("Value: <b>${%value} %</b>");

Попробуйте это и посмотрите, работает ли?

person gugateider    schedule 31.07.2019
comment
Привет, я попробовал это на моей игровой площадке описания, похоже, это не работает. Но ничего, не волнуйтесь, я выберу способ поддержки @AnyChart. Спасибо за Ваш ответ. - person Paulolafoudre; 01.08.2019