Я использую Highcharts для построения гистограммы. Вы можете просмотреть текущий пример здесь:

https://jsfiddle.net/5o73tccm/4/

var data = [35,337,84,80,54,171,73,86,109,77,99,64,128,73,62,65,87,31,60,50,99,82,191,97,91,47,94,87,107,78,77,79,110,84,257,71,95,137,100,133,76,62,36,41,27,106,181,99,40,100,150,113,196,45,167,82,68,37,63,48,83,168,175,79,64,78,82,67,51,49,76,62,36,41,27,99,76,38,63,73,44,149,130,58,175,109,94,128,200,79,137,159,54,125,100,111,66,79,171,82,141,72,76,70,93,92,61,97,52];
var numItems = data.length;
Highcharts.chart('container', {
    title: {
        text: 'Title',
        style: {
            fontWeight: 'bold',
            fontSize: "12px"
        }
    },
    legend: {
        enabled: false
    },
    xAxis: [{
        title: { text: '' },
        opposite: true,
        alignTicks: false,
        visible: false
    }, {
        title: { text: 'Axis Data' },
        alignTicks: false,
        opposite: false,
        }],


yAxis: [{
    title: { text: '' },
    opposite: true,
    visible: false
}, {
    title: { text: 'Percentage' },
    opposite: false,
    labels: {
        formatter: function () {
            var number = ((this.value / numItems) * 100);

            return Highcharts.numberFormat(number, 1) + '%';
        }
    }
}],

series: [{
    name: 'Histogram',
    type: 'histogram',
    xAxis: 1,
    yAxis: 1,
    baseSeries: 's1',
    zIndex: -1,
    tooltip: {
        pointFormatter: function () {
            var number = ((this.y / numItems) * 100);
            return 'Number <b>' + this.y + '</b><br/>Percentage <b>' + Highcharts.numberFormat(number, 1) + ' %</b>';
        }
    }
}, {
    name: 'Data',
    type: 'scatter',
    data: data,
    id: 's1',
    marker: {
        radius: 0
    }
    }]
});

При наведении курсора на каждый столбец отображается процентное значение для этого столбца относительно общего набора данных. В этом случае это:

1,8% / 20,2% / 38,5% / 18,3% / 9,2% / 7,3% / 2,8% / 0,9% / 0,9%

Я хочу добавить к этому графику отображение сплайн-диаграммы:

https://www.highcharts.com/docs/chart-and-series-types/spline-chart

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

0 / 1,8 / 22 / 60,5 / 78,8 / 88 / 95,3 / 98,1 / 99/100

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

0
user8500307 1 Мар 2018 в 20:06

1 ответ

Лучший ответ

Вы можете добавлять серии динамически после загрузки диаграммы. Используйте метод chart.addSeries () на событие загрузки диаграммы.

Вы можете добавить дополнительную ось xAxis, которая связана с гистограммой xAxis, чтобы построенный сплайн был центрирован в соответствии с соответствующим столбцом.

Добавить серию при загрузке:

chart: {
  alignTicks: false,
    events: {
      load() {
        const histogram = this.get('h1')
        const cumulativeFrequency = [0]

        const cumulativePercentage = [{
            x: -histogram.binWidth / 2,
            y: 0
          }]
          .concat(
            histogram.points
            .map((point, i) => {
              const sum = cumulativeFrequency[i] + point.y

              cumulativeFrequency.push(sum)

              return {
                x: point.x + (point.x2 - point.x) / 2,
                y: Math.round(sum / numItems * 100 * 10) / 10,
                hx: point.x,
                hx2: point.x2
              }
            })
          )

        this.addSeries({
          type: 'spline',
          data: cumulativePercentage,
          yAxis: 1,
          xAxis: 2,
          tooltip: {
            headerFormat: '',
            pointFormatter() {
              const { hx, hx2 } = this.options
              const headerFormat = `<span style="font-size: 10px">${hx} - ${hx2}</span><br/>`
              const pointFormat = `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${this.y}%</b><br/>`

              return headerFormat + pointFormat
            }
          }
        })
      }
    }
  },

Установите дополнительную ось:

xAxis: [..., {
    linkedTo: 1
}],

Живой пример и вывод

https://jsfiddle.net/yzskLxar/

center spline

0
morganfree 2 Мар 2018 в 02:16