当我使用JSON数据源时,如何向折线图添加回归线- Highcharts.js react

brvekthn  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我目前正在努力创建一个趋势线到一个折线图。发现一些旧的解决方案,这些东西不为我工作。

当前代码(Json文件):

[
{
    "key": "003",
    "title": "Detections",
    "type": "chart",
    "chartData": {
        "chart": {
            "type": "line",
            "renderTo": "container"
        },
        "title": {
            "text": ""
        },
        "subtitle": {
            "text": ""
        },

        "xAxis": {
            "categories": ["Jan 7", "Jan 14", "Jan 21", "Jan 28",
        "Feb 4","Feb 11","Feb 18","Feb 25",
        "Mar 4","Mar 11","Mar 18","Mar 28",
        "Apr 1","Apr 8","Apr 15","Apr 22","Apr 29",
        "May 6","May 13","May 20","May 27"

        ]
        },

        "colors": [ "#f89c1b"],

        "yAxis": {
            "title": {
                "text": "Number of Exits"
            }
        },
        "plotOptions": {
            "line": {
                "dataLabels": {
                    "enabled": true
                },
                "enableMouseTracking": false
            }
        },
        "series": [{
            "name": "Week",
            "data": [60,12,29,48,
            24,31,15,37,
            32,16,22,29,
            21,13,9,14,15,
            10,12,13,7]
        }
    ]

    },
    "index": 2,
    "defaultWidth": "100%"
}
]

当前图表:
enter image description here
我该如何添加一条回归线?
我找到了这个链接,它显示要在JS中添加回归线。但是有没有一种方法可以使用JSON来完成这个任务呢?

tzdcorbm

tzdcorbm1#

与其他指标类似,您需要加载并初始化适当的模块(在本例中为指标和回归):

// Import Highcharts
import Highcharts from "highcharts/highstock";
import indicators from "highcharts/indicators/indicators";
import regressions from "highcharts/indicators/regressions";

indicators(Highcharts);
regressions(Highcharts);

并添加新的趋势线系列:

series: [
  {
    id: "mainSeries",
    name: "Week",
    data: [...]
  },
  {
    type: "linearRegression",
    linkedTo: "mainSeries"
  }
]

现场演示:https://codesandbox.io/s/highcharts-react-demo-fork-vjni21?file=/demo.jsx
API引用:https://api.highcharts.com/highstock/series.linearregression

相关问题