时间戳

首页 > 解决方案 > 使用javascript以动态方式为同一轴绘制多个数据标签

javascript - 使用javascript以动态方式为同一轴绘制多个数据标签

问题描述

我从后端 api 获取数据集，它将具有相同 x 和 y 轴的多个数据标签。我如何才能为“n”值实现这一点。

我尝试了 1,2 和 4，它正在工作。但不确定这是否是正确的方法，以及如何实现调整行大小和列大小的“n”值。

Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },


  title: {
    text: 'Sales per employee per weekday'
  },

  xAxis: {
    min: 0,
    categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
  },

  yAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    title: null,
    min: 0
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },


  plotOptions: {
    series: {
      borderWidth: 1,
      dataLabels: {
        enabled: true,
        color: '#000000'
      },
      states: {
        inactive: {
          opacity: 1
        }
      }
    }
  },

  series: [{
    name: 'Sales per employee',
    data: [
      [0, 1, 19],
      [0, 2, 8],
      [0, 3, 24],
      [0, 4, 67],
      [1, 0, 92],
      [9, 4, 91]
    ]
  }, {
    rowsize: 0.5,
    colsize: 0.5,
    color: Highcharts.getOptions().colors[0],
    data: [
      [-0.25, 0.25, 70],
      [0.25, 0.25, 60],
      [-0.25, -0.25, 65],
      [0.25, -0.25, 34]
    ]
  }]

});
以上是示例代码

标签： javascriptangularreactjshighchartsheatmap

解决方案

我认为您的想法非常好，但是为了更容易对齐点，您只能创建列或行。

在此处输入图像描述

我在下面创建了一个函数，它为具有相同x和y值的点创建新系列，并将它们对齐在一行中。

function getSeries(data) {
    var i = 0,
        k,
        dataLength,
        movement,
        index = 0,
        colSize,
        limitVal,
        series = [{
            data: []
        }],
        newSeries;


    for (i; i < data.length; i++) {
        if (
            data[i + 1] &&
            data[i][0] === data[i + 1][0] &&
            data[i][1] === data[i + 1][1]
        ) {
            if (newSeries) {
                newSeries.data.push(data[i]);
            } else {
                newSeries = {
                    data: [data[i]]
                }
            }

        } else {
            if (newSeries) {
                newSeries.data.push(data[i]);
                dataLength = newSeries.data.length;
                newSeries.colsize = colSize = 1 / newSeries.data.length;

                movement = dataLength % 2 ? 0 : colSize / 2;

                limitVal = colSize * Math.floor(dataLength / 2) - movement;

                for (k = -limitVal; k <= limitVal; k += colSize) {
                    newSeries.data[index][0] += k;
                    index++;
                }

                series.push(newSeries);
                index = 0;
                newSeries = null;

            } else {
                series[0].data.push(data[i]);
            }
        }
    }

    return series
}

Highcharts.chart('container', {
    ...,

    series: getSeries(data)
});

现场演示： https ://jsfiddle.net/BlackLabel/9Ltxcgn6/

推荐阅读