ChartJS 如何在chart-js折线图中为上升趋势指定绿色，为下降趋势指定红色？

qc6wkl3g  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(297)

我想在chart-js中为折线图中的上升趋势分配绿色，在chart-js中为下降趋势分配红色。我对chartjs比较陌生，我不确定如何访问数据元素来发现上升趋势或下降趋势。

  1. import React, { useEffect } from "react";
  2. import {Paper,Grid,Box} from '@mui/material'
  4. import { Line } from "react-chartjs-2";
  5. import {
  6.   Chart as ChartJS,
  7.   CategoryScale,
  8.   LinearScale,
  9.   PointElement,
  10.   LineElement,
  11.   Title,
  12.   Tooltip,
  13.   Legend,
  14. } from 'chart.js';
  15. import { Button, Typography } from "@mui/material";
  17. ChartJS.register(
  18.   CategoryScale,
  19.   LinearScale,
  20.   PointElement,
  21.   LineElement,
  22.   Title,
  23.   Tooltip,
  24.   Legend
  25. );
  27. export default function Nifty50() {
  29.   const dataset = [
  30.     {
  31.       "Close": 17069.1,
  32.       "Date": "2022-05-02T10:00:00.000Z",
  33.       "High": 17092.25,
  34.       "Low": 16917.25,
  35.       "Open": 16924.45,
  36.       "Volume": 0,
  37.       "id": 1
  38.     },
  39.     {
  40.       "Close": 16677.6,
  41.       "Date": "2022-05-04T10:00:00.000Z",
  42.       "High": 17132.85,
  43.       "Low": 16623.95,
  44.       "Open": 17096.6,
  45.       "Volume": 0,
  46.       "id": 2
  47.     },
  48.     {
  49.       "Close": 16682.65,
  50.       "Date": "2022-05-05T10:00:00.000Z",
  51.       "High": 16945.7,
  52.       "Low": 16651.85,
  53.       "Open": 16854.75,
  54.       "Volume": 0,
  55.       "id": 3
  56.     },
  57.     {
  58.       "Close": 16411.25,
  59.       "Date": "2022-05-06T10:00:00.000Z",
  60.       "High": 16484.2,
  61.       "Low": 16340.9,
  62.       "Open": 16415.55,
  63.       "Volume": 0,
  64.       "id": 4
  65.     },
  66.     {
  67.       "Close": 16301.85,
  68.       "Date": "2022-05-09T10:00:00.000Z",
  69.       "High": 16403.7,
  70.       "Low": 16142.1,
  71.       "Open": 16227.7,
  72.       "Volume": 0,
  73.       "id": 5
  74.     },
  75.     {
  76.       "Close": 16240.05,
  77.       "Date": "2022-05-10T10:00:00.000Z",
  78.       "High": 16404.55,
  79.       "Low": 16197.3,
  80.       "Open": 16248.9,
  81.       "Volume": 0,
  82.       "id": 6
  83.     },
  84.     {
  85.       "Close": 16167.1,
  86.       "Date": "2022-05-11T10:00:00.000Z",
  87.       "High": 16318.75,
  88.       "Low": 15992.6,
  89.       "Open": 16270.05,
  90.       "Volume": 0,
  91.       "id": 7
  92.     },
  93.     {
  94.       "Close": 15808,
  95.       "Date": "2022-05-12T10:00:00.000Z",
  96.       "High": 16041.95,
  97.       "Low": 15735.75,
  98.       "Open": 16021.1,
  99.       "Volume": 0,
  100.       "id": 8
  101.     },
  102.     {
  103.       "Close": 15782.15,
  104.       "Date": "2022-05-13T10:00:00.000Z",
  105.       "High": 16083.6,
  106.       "Low": 15740.85,
  107.       "Open": 15977,
  108.       "Volume": 0,
  109.       "id": 9
  110.     },
  111.     {
  112.       "Close": 15842.3,
  113.       "Date": "2022-05-16T10:00:00.000Z",
  114.       "High": 15977.95,
  115.       "Low": 15739.65,
  116.       "Open": 15845.1,
  117.       "Volume": 0,
  118.       "id": 10
  119.     },
  120.     {
  121.       "Close": 16259.3,
  122.       "Date": "2022-05-17T10:00:00.000Z",
  123.       "High": 16284.25,
  124.       "Low": 15900.8,
  125.       "Open": 15912.6,
  126.       "Volume": 0,
  127.       "id": 11
  128.     },
  129.     {
  130.       "Close": 16240.3,
  131.       "Date": "2022-05-18T10:00:00.000Z",
  132.       "High": 16399.8,
  133.       "Low": 16211.2,
  134.       "Open": 16318.15,
  135.       "Volume": 0,
  136.       "id": 12
  137.     },
  138.     {
  139.       "Close": 15809.4,
  140.       "Date": "2022-05-19T10:00:00.000Z",
  141.       "High": 15984.75,
  142.       "Low": 15775.2,
  143.       "Open": 15917.4,
  144.       "Volume": 0,
  145.       "id": 13
  146.     },
  147.     {
  148.       "Close": 16266.15,
  149.       "Date": "2022-05-20T10:00:00.000Z",
  150.       "High": 16283.05,
  151.       "Low": 16003.85,
  152.       "Open": 16043.8,
  153.       "Volume": 0,
  154.       "id": 14
  155.     },
  156.     {
  157.       "Close": 16214.7,
  158.       "Date": "2022-05-23T10:00:00.000Z",
  159.       "High": 16414.7,
  160.       "Low": 16185.75,
  161.       "Open": 16290.95,
  162.       "Volume": 0,
  163.       "id": 15
  164.     },
  165.     {
  166.       "Close": 16125.15,
  167.       "Date": "2022-05-24T10:00:00.000Z",
  168.       "High": 16262.8,
  169.       "Low": 16078.6,
  170.       "Open": 16225.55,
  171.       "Volume": 0,
  172.       "id": 16
  173.     },
  174.     {
  175.       "Close": 16025.8,
  176.       "Date": "2022-05-25T10:00:00.000Z",
  177.       "High": 16223.35,
  178.       "Low": 16006.95,
  179.       "Open": 16196.35,
  180.       "Volume": 0,
  181.       "id": 17
  182.     },
  183.     {
  184.       "Close": 16170.15,
  185.       "Date": "2022-05-26T10:00:00.000Z",
  186.       "High": 16204.45,
  187.       "Low": 15903.7,
  188.       "Open": 16105,
  189.       "Volume": 0,
  190.       "id": 18
  191.     },
  192.     {
  193.       "Close": 16352.45,
  194.       "Date": "2022-05-27T10:00:00.000Z",
  195.       "High": 16370.6,
  196.       "Low": 16221.95,
  197.       "Open": 16296.6,
  198.       "Volume": 0,
  199.       "id": 19
  200.     },
  201.     {
  202.       "Close": 16661.4,
  203.       "Date": "2022-05-30T10:00:00.000Z",
  204.       "High": 16695.5,
  205.       "Low": 16506.15,
  206.       "Open": 16527.9,
  207.       "Volume": 0,
  208.       "id": 20
  209.     },
  210.     {
  211.       "Close": 16584.55,
  212.       "Date": "2022-05-31T10:00:00.000Z",
  213.       "High": 16690.75,
  214.       "Low": 16521.9,
  215.       "Open": 16578.45,
  216.       "Volume": 0,
  217.       "id": 21
  218.     },
  219.     {
  220.       "Close": 16522.75,
  221.       "Date": "2022-06-01T10:00:00.000Z",
  222.       "High": 16649.2,
  223.       "Low": 16438.85,
  224.       "Open": 16594.4,
  225.       "Volume": 0,
  226.       "id": 22
  227.     },
  228.     {
  229.       "Close": 16628,
  230.       "Date": "2022-06-02T10:00:00.000Z",
  231.       "High": 16646.4,
  232.       "Low": 16443.05,
  233.       "Open": 16481.65,
  234.       "Volume": 0,
  235.       "id": 23
  236.     },
  237.     {
  238.       "Close": 16584.3,
  239.       "Date": "2022-06-03T10:00:00.000Z",
  240.       "High": 16793.85,
  241.       "Low": 16567.9,
  242.       "Open": 16761.65,
  243.       "Volume": 0,
  244.       "id": 24
  245.     },
  246.     {
  247.       "Close": 16569.55,
  248.       "Date": "2022-06-06T10:00:00.000Z",
  249.       "High": 16610.95,
  250.       "Low": 16444.55,
  251.       "Open": 16530.7,
  252.       "Volume": 0,
  253.       "id": 25
  254.     },
  255.     {
  256.       "Close": 16416.35,
  257.       "Date": "2022-06-07T10:00:00.000Z",
  258.       "High": 16487.25,
  259.       "Low": 16347.1,
  260.       "Open": 16469.6,
  261.       "Volume": 0,
  262.       "id": 26
  263.     },
  264.     {
  265.       "Close": 16356.25,
  266.       "Date": "2022-06-08T10:00:00.000Z",
  267.       "High": 16514.3,
  268.       "Low": 16293.35,
  269.       "Open": 16474.95,
  270.       "Volume": 0,
  271.       "id": 27
  272.     },
  273.     {
  274.       "Close": 16478.1,
  275.       "Date": "2022-06-09T10:00:00.000Z",
  276.       "High": 16492.8,
  277.       "Low": 16243.85,
  278.       "Open": 16263.85,
  279.       "Volume": 0,
  280.       "id": 28
  281.     },
  282.     {
  283.       "Close": 16201.8,
  284.       "Date": "2022-06-10T10:00:00.000Z",
  285.       "High": 16324.7,
  286.       "Low": 16172.6,
  287.       "Open": 16283.95,
  288.       "Volume": 0,
  289.       "id": 29
  290.     },
  291.     {
  292.       "Close": 15774.4,
  293.       "Date": "2022-06-13T10:00:00.000Z",
  294.       "High": 15886.15,
  295.       "Low": 15684,
  296.       "Open": 15877.55,
  297.       "Volume": 0,
  298.       "id": 30
  299.     },
  300.     {
  301.       "Close": 15732.1,
  302.       "Date": "2022-06-14T10:00:00.000Z",
  303.       "High": 15858,
  304.       "Low": 15659.45,
  305.       "Open": 15674.25,
  306.       "Volume": 0,
  307.       "id": 31
  308.     },
  309.     {
  310.       "Close": 15692.15,
  311.       "Date": "2022-06-15T10:00:00.000Z",
  312.       "High": 15783.65,
  313.       "Low": 15678.9,
  314.       "Open": 15729.25,
  315.       "Volume": 0,
  316.       "id": 32
  317.     },
  318.     {
  319.       "Close": 15360.6,
  320.       "Date": "2022-06-16T10:00:00.000Z",
  321.       "High": 15863.15,
  322.       "Low": 15335.1,
  323.       "Open": 15832.25,
  324.       "Volume": 0,
  325.       "id": 33
  326.     },
  327.     {
  328.       "Close": 15293.5,
  329.       "Date": "2022-06-17T10:00:00.000Z",
  330.       "High": 15400.4,
  331.       "Low": 15183.4,
  332.       "Open": 15272.65,
  333.       "Volume": 0,
  334.       "id": 34
  335.     },
  336.     {
  337.       "Close": 15350.15,
  338.       "Date": "2022-06-20T10:00:00.000Z",
  339.       "High": 15382.5,
  340.       "Low": 15191.1,
  341.       "Open": 15334.5,
  342.       "Volume": 0,
  343.       "id": 35
  344.     },
  345.     {
  346.       "Close": 15638.8,
  347.       "Date": "2022-06-21T10:00:00.000Z",
  348.       "High": 15707.25,
  349.       "Low": 15419.85,
  350.       "Open": 15455.95,
  351.       "Volume": 0,
  352.       "id": 36
  353.     }
  354.   ]
  356.   var dataReqdFormat = {
  357.     labels: [],
  358.     datasets: [{
  359.       data: [],
  360.       label: "Nifty",
  361.       fill: true,
  362.       borderColor: "rgba(75,192,192,1)"
  363.     }]
  364.   };
  366.   dataset.forEach((datapoint) => {
  367.     dataReqdFormat.labels.push(datapoint.Date.split('T')[0]);
  368.     dataReqdFormat.datasets[0].data.push(datapoint.Close);
  369.   })
  371.   const [duration, setDuration] = React.useState(dataset.length);
  372.   const [chartData, setChartData] = React.useState(dataReqdFormat);
  374.   const changeData = (duration) => {
  375.     setDuration(duration);
  376.     console.log(dataReqdFormat);
  377.     var tempData = dataReqdFormat;
  378.     tempData.labels = dataReqdFormat.labels.slice(-duration);
  379.     for (var i = 0; i < dataReqdFormat.datasets.length; i++) {
  380.       tempData.datasets[i].data = dataReqdFormat.datasets[i].data.slice(-duration);
  381.     }
  382.     console.log(tempData);
  383.     setChartData(tempData);
  384.   }
  386.   useEffect(() => {
  387.     changeData(30);
  388.   }, [])
  390.   const options = {
  391.     plugins: {
  392.       legend: {
  393.         display: false,
  394.       },
  395.     },
  397.   };
  399.   return (
  400.     <div>
  401. <Grid sx={{alignItems:"center"}}>
  402.       <Button onClick={() => changeData(3)} variant={duration === 3 ? "contained" : "outlined"} style={{ margin: "5px", marginBottom: "0", background: "white", color: "black" }}>
  403.         3D
  404.       </Button>
  405.       <Button onClick={() => changeData(7)} variant={duration === 7 ? "contained" : "outlined"} style={{ margin: "5px", marginBottom: "0", background: "white", color: "black" }}>
  406.         1W
  407.       </Button>
  408.       <Button onClick={() => changeData(30)} variant={duration === 30 ? "contained" : "outlined"} style={{ margin: "5px", marginBottom: "0", background: "white", color: "black" }}>
  409.         1M
  410.       </Button>
  412.       <Line data={chartData} options={options} />
  413.       </Grid>
  415.     </div>
  416.   )
  417. }

我目前已经将rgba（75，192，192，1）分配给了不考虑趋势的线。任何帮助都是感激的。

chart.js

1条答案

按热度按时间
qeeaahzv

qeeaahzv1#

您可以使用段来执行以下操作：

  1. var dataReqdFormat = {
  2.   labels: [],
  3.   datasets: [{
  4.     data: [],
  5.     label: "Nifty",
  6.     fill: true,
  7.     segment: {
  8.       borderColor: ctx => ctx.p1.parsed.y <= ctx.p0.parsed.y ? 'red' : 'green'
  9.     }
  10.   }]
  11. };

示例：
第一个

编辑：

您可以使用可编写脚本的函数来执行此操作：

  1. var dataReqdFormat = {
  2.   labels: [],
  3.   datasets: [{
  4.     data: [],
  5.     label: "Nifty",
  6.     fill: true,
  7.     borderColor: (ctx) => {
  8.       const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
  9.       return data[0] >= data[data.length - 1] ? 'red' : 'green'
  10.     }
  11.   }]
  12. };

示例：
第一个

展开查看全部
赞(0）分享  回复(0）举报  2022-11-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com