Объединение графиков в старших чартах - PullRequest
Новая
       53

Объединение графиков в старших чартах

2 голосов
/ 03 мая 2020

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

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

Песочница: https://codesandbox.io/s/react-line-chart-n9g6o?file= / src / LineChart. js

Вот что я попробовал 

import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);

function LineChart(props) {
  let chartOptions = {
    chart: {
      type: "line",
      height: props.height
    },
    credits: false,
    exporting: { enabled: false },
    title: {
      text: ""
    },
    legend: {
      align: "center",
      verticalAlign: "bottom",
      x: 0,
      y: 0
    },
    tooltip: {
      shared: true,
      useHTML: true,
      formatter: function() {
        let self = this;
        let formattedString = "<small></small><table>";
        self.points.forEach(elem => {
          formattedString +=
            '<tr><td style="color: {series.color}">' +
            elem.series.name +
            ": </td>";
          formattedString +=
            '<td style="text-align: right"><b>' + elem.y + "</b></td></tr>";
        });
        return formattedString;
      }
    },
    colors: props.legendColor,
    xAxis: {
      visible: false
    },
    yAxis: {
      visible: true,
      step: 1
    },
    plotOptions: {
      column: {
        dataLabels: {
          enabled: true,
          crop: false,
          overflow: "none"
        }
      },
      line: {
        marker: {
          enabled: false
        }
      }
    },
    series: props.chartData
  };
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

export default LineChart;

Может кто-нибудь помочь мне здесь? Помощь будет оценена.

1 Ответ

1 голос
/ 04 мая 2020

Вам нужно только установить правильные type в объекте конфигурации серии: 

data.push({
  name: "BASELINE",
  type: 'area',
  data: old,
  keys: ["x", "y", "ots"]
});

Демонстрационная версия: https://codesandbox.io/s/react-line-chart-2ohem?file= / src / index . js

Справочник по API: https://api.highcharts.com/highcharts/series.area.type

...