带有线条的 Fusioncharts 区域范围图答案

【问题标题】：Fusioncharts area range graph with line带有线条的 Fusioncharts 区域范围图
【发布时间】：2021-04-17 09:09:44
【问题描述】：

我正在尝试创建一个带有相应中线的区域范围图。见下图。

我已经成功添加了低值和高值，但是，我仍然在为代表中间值的线苦苦挣扎。到目前为止，这是我的代码：

const schema = [
    {
      "name": "Date",
      "type": "date",
      "format": "%Y-%m-%d",
    },
    {
      "name": "Low",
      "type": "number",
    },
    {
      "name": "High",
      "type": "number",
    },
  ];

  type dataProperties = {Date: string, Low: number, High: number};
  type lineProperties = {value: number};
  let graphData: dataProperties[] = [];
  let lineData: lineProperties[] = [];
  let jsonData: dataProperties;

  // Create an array of JSON objects from the data
  for (let i = 1; i < data.EVI.length; i++) {
    jsonData = {
      Date: data.x[i],
      Low: data.EVI[i][2],
      High: data.EVI[i][0],
    };
    graphData.push(jsonData);
    lineData.push({value: data.EVI[i][1]});
  }

  this.variationOverTime = {
    chart: {},
    dataset: [
      {
        "seriesName": "Mid",
        "renderAs": "line",
        "data": lineData // I'm guessing this is where I'm doing something wrong
      }
    ],
    caption: {
      text: "Vigour Block and Variation Over Time"
    },
    yaxis: [
      {
        "plot": {
          "value": {
            high: "High",
            low: "Low"
          },
          "type": "area-range",
          "name": "area-range"
        }
      }
    ],
  };
  const fusionDataStore = new FusionCharts.DataStore();
  const fusionTable = fusionDataStore.createDataTable(graphData, schema);
  this.variationOverTime.data = fusionTable;

我查看了 JSFiddle (https://jsfiddle.net/73xgmacm/249/) 上的另一个示例，试图将其合并到区域范围图中。目前这条线只是没有显示。我也没有看到任何可能有助于解决问题的错误。任何帮助将不胜感激！

【问题讨论】：

标签： javascript angular fusioncharts

【解决方案1】：

您需要在架构中创建另一个对象来表示两个范围的线（平均值），请查看此演示：https://jsfiddle.net/zj9f5aed/2/

const URL_DATA = 'https://gist.githubusercontent.com/AyanBhadury/f8386b94f41f234e6420f8c4639f34cb/raw/885678b394173e6b445a67ba4917d88b6f02bd0b/data.json';
const URL_SCHEMA = 'https://gist.githubusercontent.com/AyanBhadury/1fcf98cf01f313b1d9a8703c0e4920b7/raw/1ef2bddcea5d0b92b4581dfb1e534af7a1cda806/schema.json';

const jsonify = res => res.json();
const dataFetch = fetch(URL_DATA).then(jsonify);
const schemaFetch = fetch(URL_SCHEMA).then(jsonify);

Promise.all([dataFetch, schemaFetch]).then(([data, schema]) => {
  var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema);

  new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: "90%",
    height: 490,
    dataSource: {
    caption: {
      text: "NewYork City - Temparature variations (2019)"
    },
    data:fusionTable,
    subcaption: {
      text: "Daily min, max and average temperatures"
    },
    chart: {
      showlegend: 1
    },
    yaxis: [
      {
        title: "Temperature in Celcius",
        plot: [
          {
            value: {
              high: "High",
              low: "Low"
            },
            type: "area-range",
            name: "Area ranged plot",
            style: {
              "plot": {
                "fill-opacity":"0.3"
              }
              }
          },
          {
            value: "Mean",
            type: "line"
          }
        ]
      }
    ]
  }
  }).render();

});

【讨论】：