Блог

Главная - Вопросы по программированию - Верхние диаграммы: как обновить параметры формы для аннотации сегмента стрелки?

Верхние диаграммы: как обновить параметры формы для аннотации сегмента стрелки?

#highcharts

#highcharts

Вопрос:

У меня есть полный код, размещенный здесь: https://jsfiddle.net/delux123/kr7ojvLw/36 / где вы можете нарисовать форму круга и форму стрелки. После рисования вы можете выбрать фигуру, и появится всплывающее окно (с пользовательским интерфейсом). Оттуда вы можете выбрать «цвет заливки», «цвет линии (обводки)» и «ширину линии (обводки)», и после нажатия кнопки «Сохранить» настройки будут применены к выбранной фигуре.

Если вы попробуете выше над формой круга, это сработает. Таким образом, фактическое обновление обрабатывается с помощью кода:

 function () {
    var fillColor = document.querySelectorAll(
        '.highcharts-popup-annotations input[name="fill-color"]'
    )[0].value;
    var lineColor = document.querySelectorAll(
        '.highcharts-popup-annotations input[name="line-color"]'
    )[0].value;
    var lineWidth = document.querySelectorAll(
        '.highcharts-popup-annotations input[name="line-width"]'
    )[0].value;
    // Update the circle
    thischart.currentAnnotation.update({
        shapes: [{
            fill: fillColor,
            stroke: lineColor,
            strokeWidth: lineWidth
        }]
    });
    // Close the popup
        thischart.annotationsPopupContainer.style.display = 'none';
    }

Проблема здесь в том, что все то же самое, но когда дело доходит до сегмента стрелки, примененные цвета и ширины не применяются, а сегмент стрелки всегда сохраняет исходные цвета / ширины, которые предварительно определены в navigation -> annotationsOptions -> shapeOptions

При выборе сегмента стрелки и изменении значений во всплывающем окне нам нужно, чтобы сегмент стрелки обновлялся так же, как это работает для формы круга.

Ответ №1:

Прямое обновление массива фигур — это решение вашей проблемы.

Демонстрация: https://jsfiddle.net/BlackLabel/tfzvhjcq /

   // Update the annotation
  thischart.currentAnnotation.shapes[0].update({
    fill: fillColor,
    stroke: lineColor,
    strokeWidth: lineWidth
  });

Комментарии:

1. и как мы можем сохранить выбранные значения, чтобы после выбора обновить общие настройки navigation -> annotationsOptions -> shapeOptions для всех будущих нарисованных кругов и сегментов, чтобы сохранить цвет в качестве цвета по умолчанию?

2. @delux Как я понял, вы хотели бы добиться чего-то подобного, что сделано в прилагаемой демонстрации? jsfiddle.net/BlackLabel/zosbh4uL

3. да, мне это нужно. Единственная проблема заключается в том, что «цвет заливки» для «сегмента стрелки» по-прежнему не сохраняется в приведенном вами примере.

4. The only remining issue is that "fill color" for "arrow segment" is still not preserved in the example you provided. Что вы имеете в виду? Не могли бы вы предоставить шаги для воспроизведения проблемы?

5. та же демонстрация, которую вы предоставили jsfiddle.net/BlackLabel/zosbh4uL попробуйте это: нарисуйте «линию» (которая на самом деле является стрелкой), выделите ее, измените цвет заливки с помощью пользовательского всплывающего окна, примените изменения при сохранении (посмотрите, как маркер стрелки имеет новый цвет заливки). Затем нарисуйте новую стрелку и посмотрите, как у маркера сохраняется цвет обводки, а не цвет заливки. Выберите вторую строку и просто примените значения из всплывающего окна и посмотрите, как теперь применяется цвет заливки. Это означает, что: цвет заливки для стрелок не сохраняется с помощью метода обновления, с которым вы мне помогли. Это работает для фигур.