Как получить перекрестие с точками рассеяния в совмещенных диаграммах и диаграммах разброса Highcharts? - PullRequest
Новая
       39

Как получить перекрестие с точками рассеяния в совмещенных диаграммах и диаграммах разброса Highcharts?

0 голосов
/ 11 апреля 2019

Я пытаюсь создать коробочную диаграмму с точками разброса, наложенными на Highcharts. Я нашел приведенный ниже пример из API Highcharts. Я пытаюсь добавить перекрестие по оси X, которое работает с точками рассеяния, а не с рамкой.

https://api.highcharts.com/highcharts/plotOptions.scatter.jitter https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-scatter/jitter-boxplot

Добавление перекрестия в диаграмму. Не рекомендуется использовать инструмент

https://api.highcharts.com/highcharts/tooltip.crosshairs

Итак, я работал над добавлением перекрестия в диаграмму. К сожалению, при добавлении к оси xA на перекрестном графике появляется перекрестие, а не каждая отдельная точка рассеяния для прямоугольного графика. 

xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: 'Experiment No.'
        },
        crosshair: true
    },

Я также пытался создать вторичную ось X, которая работает при начальной загрузке графика, но при увеличении масштаба точки рассеяния не синхронизируются с диаграммами прямоугольников.

https://jsfiddle.net/cvngt48a/

Я хочу, чтобы перекрестие оси x в приведенном выше jsfiddle совпало с каждой точкой разброса, а не с рамкой. Мой настоящий код находится в Highcharts.net v7.0.1, но я использую js для моего примера.

* 1022 обновление ******** *******

Благодаря Grzegorz Blachliński из службы технической поддержки Highsoft у меня есть решение, которое работает для highcharts.js v7.0.3. Он добавил ширину 1 в перекрестие, и теперь оно работает как нужно.

https://jsfiddle.net/cvngt48a/1/

Однако это исправление не работает для highcharts.net v7.0.1, который я на самом деле использую. Похоже, что он работает в js v7.0.1 (даже если джиттер не является допустимой функцией), так как ширина перекрестия по-прежнему равна 1, тогда как при использовании просто «crosshair: true» ширина перекрестия - это весь прямоугольник (который является поведение, которое я вижу в .net v7.0.1, использую ли я crosshair: true или пытаюсь установить его ширину равной 1). https://jsfiddle.net/sfzd2met/

Вот соответствующий фрагмент моего кода веб-форм asp.net: 

XAxis = new List<XAxis>
{
    new XAxis
    {
        //Id = "Box",
        Type = XAxisType.Category,
        Categories = legend, //List<String>
        CrosshairBool = true,
        //this is the solution per Highcharts and works in highcharts.js v7.0.3, but doesn't work in .net v7.0.1
        //Crosshair = new XAxisCrosshair
        //{
        //    Width = 1,
        //    Color = "lightgrey"
        //}
    }//,
    ////tried creating a secondary x-axis in order to implement cross hairs for tooltips based on the scatter point x-axis locations,
    ////but the two axes were only vertically aligned on initial load. upon zoom, they got out of alignment and so the scatter points
    ////were no longer within the box plot. turning on cross hairs via Chart.Tooltip only worked for the box plot crosshair.
    //new XAxis
    //{
    //    Id = "Scatter",
    //    Type = XAxisType.Linear,
    //    CrosshairBool = true
    //}
},

Когда я исследую фактические элементы веб-страницы, я вижу, что у highcharts-crosshair вниз в теге svg path для этого графика есть stroke: lightgrey и stroke-width: 30. Таким образом, будет отображаться свойство Width класса XAxisCrosshair на самом деле не работает, но цвет работает. Если я вручную отредактирую веб-страницу с помощью инструментов разработчика Chrome, я получу перекрестие шириной 1px, поэтому я начинаю думать, что эта проблема - ошибка .net v7.0.1. У кого-нибудь есть другие предложения / идеи для решения? Обновление до v7.0.3 возможно для моего проекта, но не быстрое решение, поэтому я надеюсь на альтернативы, хотя, если кто-то может подтвердить, что он работает в .net v7.0.3, это было бы наиболее полезно.

...