Highcharts - создание диаграммы с одинаковой осью шкалы

Question

Я пытаюсь создать комбинированную диаграмму с линейными и полукругами с числовой осью x и y. У меня проблема, потому что я не могу создать диаграмму с осью в том же масштабе. Как я стараюсь, я всегда получаю разные пропорции шкалы х и у. Вот пример: https://jsfiddle.net/nje5cj6x/.

var data = [ 
     [10, 100], 
     [20, 150], 
     [30, 200], 
     [40, 250], 
     [50, 300] 
    ]; 

Таким образом, контейнер имеет такую ​​же ширину и высоту, обе оси совпадают, но по-прежнему оси х и у не являются те же пропорции: Measured width and height

Таким образом, на этом графике каждая точка линия должна пересекаться с соответствующим полукругом в точке 90 '. Это можно сделать?

Кроме того, могу ли я добавить дополнительные данные в данные var? Например, я хотел бы передать переменную r, кроме x и y для радиуса? Но если я сделаю это, значения не рассчитываются в том же масштабе, так что если я редактирую код:

chart.renderer.arc(point.plotX + chart.plotLeft, point.plotY + chart.plotTop, point.r, point.r, -Math.PI, 0) 

я получить еще худший результат.

Спасибо!

Answer 1

В вашем примере элемент холста имеет одинаковую ширину и высоту. Тем не менее, в нижней части окна используется ярлык/легенда, который используется слева для ярлыков. В результате площадь участка имеет несколько разную ширину и высоту. Так как ось x и ось y имеют один и тот же диапазон, 1 единица на оси x и 1 единица по оси y имеют несколько разную длину в единицах холста. Вместо рендеринга круга на участке графика вам нужно отобразить эллипс (это почти круг).

Одним из решений является толкание трех точек (слева, сверху, справа) для каждой дуги в массив circle_data. Затем используйте области области графика этих трех точек, чтобы сделать путь для кривой эллиптической кривой. Например ...

$(function() { 
 
    var data = [ 
 
    [10, 100], 
 
    [20, 150], 
 
    [30, 200], 
 
    [40, 250], 
 
    [50, 300] 
 
    ]; 
 

 
    var line_data = []; 
 
    var circle_data = []; 
 
    for (var i = 0; i < data.length; i++) { 
 
    var xValue = data[i][1]/2; 
 
    var yValue = 0; 
 
    var rValue = data[i][1]/2; 
 

 
    circle_data.push({ 
 
     x: xValue - rValue, 
 
     y: yValue, 
 
    }); 
 
    circle_data.push({ 
 
     x: xValue, 
 
     y: yValue + rValue, 
 
    }); 
 
    circle_data.push({ 
 
     x: xValue + rValue, 
 
     y: yValue, 
 
    }); 
 
    line_data.push({ 
 
     x: xValue, 
 
     y: rValue 
 
    }); 
 
    } 
 

 
    $('#container2').highcharts({ 
 
     title: { 
 
     text: '', 
 
     }, 
 
     credits: { 
 
     enabled: false 
 
     }, 
 
     exporting: { 
 
     enabled: false 
 
     }, 
 
     tooltip: { 
 
     enabled: true 
 
     }, 
 
     xAxis: { 
 
     title: { 
 
      useHTML: true, 
 
      text: '&sigma; (MPa)' 
 
     }, 
 
     gridLineWidth: 1, 
 
     min: 0, 
 
     max: 360, 
 
     tickInterval: 20 
 
     }, 
 
     yAxis: { 
 
     title: { 
 
      useHTML: true, 
 
      text: '&tau; (MPa)' 
 
     }, 
 
     gridLineWidth: 1, 
 
     min: 0, 
 
     max: 360, 
 
     tickInterval: 20 
 
     }, 
 
     plotOptions: { 
 
     line: { 
 
      marker: { 
 
      enabled: true 
 
      } 
 
     } 
 
     }, 
 
     series: [{ 
 
     // dataset za krivulju 
 
     type: 'line', 
 
     name: 'o3(MPa)', 
 
     enableMouseTracking: true, 
 
     data: line_data, 
 
     point: { 
 
      events: { 
 
      mouseOver: function() { 
 
       $('#row_' + this.index + ' > td').css("background-color", "yellow"); 
 
      }, 
 
      mouseOut: function() { 
 
       $('#row_' + this.index + ' > td').css("background-color", "white"); 
 
      } 
 
      } 
 
     } 
 
     }, { 
 
     // dataset za Mohrove kružnice 
 
     visible: false, 
 
     data: circle_data, 
 
     }] 
 
    }, 
 
    function(chart) { 
 
     // crtanje Mohrovih kružnica 
 
     for (var i = 0; 3 * i + 2 < chart.series[1].data.length; i++) { 
 
     var point0 = chart.series[1].data[3 * i]; 
 
     var point1 = chart.series[1].data[3 * i + 1]; 
 
     var point2 = chart.series[1].data[3 * i + 2]; 
 
     var pathData = [ 
 
      "M", 
 
      chart.plotLeft + point0.plotX, 
 
      chart.plotTop + point0.plotY, 
 
      "A", 
 
      point2.plotX - point1.plotX, 
 
      point2.plotY - point1.plotY, 
 
      0, 
 
      1, 
 
      1, 
 
      chart.plotLeft + point2.plotX, 
 
      chart.plotTop + point2.plotY, 
 
     ]; 
 
     chart.renderer.path(pathData) 
 
      .attr({ 
 
      id: 'arc_' + i, 
 
      fill: null, 
 
      stroke: 'silver', 
 
      'stroke-width': 0, 
 
      data_id: i, 
 
      }) 
 
      .on('mouseover', function() { 
 
      $(this).css('stroke', 'red'); 
 
      $('#row_' + $(this).attr('data_id') + ' > td').css("background-color", "yellow"); 
 
      }) 
 
      .on('mouseout', function() { 
 
      $(this).css('stroke', 'silver'); 
 
      $('#row_' + $(this).attr('data_id') + ' > td').css("background-color", "white"); 
 
      }) 
 
      .animate({ 
 
      'stroke-width': 3 
 
      }) 
 
      .add(); 
 
     } 
 
     chart.series[1].remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container2" style="width: 600px; height: 600px;"></div>

Обратите внимание, что это решение работает для любого радиуса. Три точки данных в массиве circle_data вычисляются по радиусу. Затем рендер вычисляет радиус из трех соответствующих участков области графика.

Answer 2

Размеры не совпадают по причине нижней легенды - требуется дополнительное пространство. Существует несколько вариантов:

• disable легенда
• делают легенды floating
• набор фиксированной ширины и высоты для осей: https://jsfiddle.net/nje5cj6x/2/

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

Что касается пунктов: конечно, вы можете добавить дополнительные параметры. Однако, я думаю, вам нужно найти отношение r -значение и r -пиксель-значение. Вы пытались использовать chart.x/yAxis[index] в пикселях?