Question

我正在尝试使用数字x和y轴创建带有线和半圆的组合图表。我有一个问题，因为我不能用相同比例的轴创建图表。我每次尝试的方式总是得到不同比例的x和y比例。以下是一个示例：https://jsfiddle.net/nje5cj6x/。

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

因此，容器具有相同的宽度和高度，两个轴都相同，但仍然x和y轴的比例不同： Measured width and height

因此，在该图上，线上的每个点应与90'处的相应半圆相交。可以这样做吗？

另外，我可以在data var中添加一些额外的数据吗？例如，我想传递变量r，除了x和y的半径？但是，如果我这样做，值不会以相同的比例计算，所以如果我编辑代码：

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

我的结果更糟糕。

谢谢！

Answer 1

尺寸因底部图例而不同 - 需要额外的空间。有几种选择：

disable传奇
制作传奇floating
为轴设置固定的宽度和高度：https://jsfiddle.net/nje5cj6x/2/

我认为，如果你有固定的图表宽度和高度，最后一个解决方案是最好的解决方案。如果没有，我建议使用第二个。

关于要点：当然，您可以添加其他参数。但是，我认为您需要找到关系r - 值和r - 像素值。您是否尝试将chart.x/yAxis[index]用于像素？

Answer 2

在您的示例中，canvas元素具有相同的宽度和高度。但是，底部用于标签/图例的空间更多，左侧用于标签。结果，绘图区域的宽度和高度略有不同。由于x轴和y轴具有相同的范围，因此x轴上的1个单位和y轴上的1个单位在画布单位中具有略微不同的长度。您需要渲染椭圆（几乎是圆形），而不是在绘图区域上渲染圆形。

一种解决方案是将每个弧的三个点（左，上，右）推入circle_data数组。然后使用这三个点的绘图区域位置来渲染椭圆弧曲线的路径。例如......

＆＃13;

$(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();
    });
});

＆＃13;

<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>

＆＃13;

请注意，此解决方案适用于任何半径。 circle_data数组中的三个数据点是根据半径计算的。渲染然后从三个相应的绘图区域位置计算半径。

Highcharts - 创建具有相同比例轴的图表

2 个答案: