Как создать график только из одного столбца таблицы HTML в HighCharts?

Question

Я уже сделал диаграмму диапазона столбцов из минимальных и максимальных значений.Теперь я хочу показать средний (средний) столбец таблицы в виде точек рассеяния на этих столбцах.Для этого мне просто понадобятся данные среднего столбца для создания точек разброса.

Я не уверен, как решить эту проблему.

    chart: {
        type: 'columnrange',
        inverted: true
    },
    data: {
        table: 'datatable'

    tooltip: {
       formatter : function() {
           return '<strong> Range: </strong>' + this.y + ' to ' +this.x;
       } 
    },
    legend: {
        enabled: false
    }

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

Здесь приведена JSfiddle графа столбцов.

Answer 1

Этого можно добиться, следуя этому подходу:

• с помощью Highcharts.Data.prototype.parseTable получить последний столбец со средними значениями
• отфильтровать средние значения для получения чисел
• используйте метод chart.addSeries для события загрузки, чтобы добавить точки разброса

Код:

$(function() {

	const table = Highcharts.Data.prototype.parseTable.call({
  	options: {
      table: "datatable",
    },
    columns: [],
    dataFound: () => {}
  });
  
  const scatterData = table[3].reduce((filtered, elem) => {
    const value = +elem;
    if (!isNaN(value)) {
      filtered.push(value);
    }
    return filtered;
  }, []);
  
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange',
      inverted: true,
      events: {
      	load: function() {
          this.addSeries({
          	type: 'scatter',
            data: scatterData
          })
        }
      }
    },
    yAxis: {
      title: {
        text: 'Mean difference (d)'
      }
    },
    data: {
      table: 'datatable'
    },
    plotOptions: {
      columnrange: {
        pointWidth: 5,
      }
    },
    tooltip: {
      formatter: function() {
        if (this.point.low) {
        	return '<strong> Range: </strong>' + this.point.low + ' to ' + this.point.high;
        } else {
        	return '<strong> Mean: </strong>' + this.y;
        }
      }
    },
    legend: {
      enabled: false
    }
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 40%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="width: 40%; height: 300px; float: right"></div>

<table id="datatable">
  <thead>
    <tr>
      <th>Treatment</th>
      <th>Min</th>
      <th>Max</th>
      <th>Mean</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Drug1</td>
      <td>-5</td>
      <td>4</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Drug2</td>
      <td>2</td>
      <td>0</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Drug3</td>
      <td>5</td>
      <td>11</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Drug4</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Drug5</td>
      <td>-2</td>
      <td>4</td>
      <td>1.5</td>
    </tr>
  </tbody>
</table>

Демонстрация:

• https://jsfiddle.net/BlackLabel/7znLy09r/1/

Ссылка API:

• https://api.highcharts.com/class-reference/Highcharts.Data#parseTable

• https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

• https://api.highcharts.com/highcharts/chart.events.load