this is the result
如何创建多色类型的折线图，其中数据的颜色和线型由温度范围确定？具体来说，我想将温度数据显示为12度以下的淡蓝色虚线，将12度和25度之间的数据显示为灰色虚线，将25度以上的数据显示为红色虚线。

`import React, { useEffect } from "react";
import {
  AverageTemperatureContainer,
  AverageTemperatureContainerIcon,
  ChartComponentContainer,
  IconAndTypographyContainer,
  TypographyContainer,
} from "./TemperatureWidget.styles";
import {
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  SplineSeries,
  Tooltip,
  MultiColoredLineSeries,
  LineSeries,
  DataLabel,
  StripLine,
} from "@syncfusion/ej2-react-charts";
import Typography from "../../Typography/Typography";
import temperature from "../../../svg/Temperature.svg";
import { useCallWidgetData } from "../../../../helpers/callWidgetData";

const TemperatureWidget = ({ type }) => {
  const { loading, data } = useCallWidgetData(type, "TEMPERATURE");

  const getColor = (value) => {
    if (value <= 12) {
      return "#94E8E8";
    } else if (value >= 25) {
      return "#FE5F5C";
    } else {
      return "#64748B";
    }
  };

  let data1 = [
    { x: "0:00", y: 8, color: getColor(12) },
    { x: "6:00", y: 15, color: getColor(16) },
    { x: "12:00", y: 25, color: getColor(27) },
    { x: "18:00", y: 27, color: getColor(20) },
    { x: "24:00", y: 8, color: getColor(12) },
  ];

  useEffect(() => {
    const setStrokeDashArray = (i) => {
      const elem = document.getElementById(`chart_57723_1_Series_0_Point_${i}`);
      if (elem && data1[i].y < 12) {
        elem.setAttribute("stroke-dasharray", "5,5");
      } else if (elem && data1[i].y >= 25) {
        elem.setAttribute("stroke-dasharray", "5,5");
      }
    };

    data1.forEach((point, i) => {
      if (point.y) {
        setStrokeDashArray(i);
      }
    });
  }, [data1]);

  const emptyPoint = { mode: "Average" };
  const sensorValueData = {
    class:
      data?.averageSensorValues &&
      (data?.averageSensorValues[0]?.value >= 2000
        ? "text-color-red"
        : data?.averageSensorValues[0]?.value >= 1000
        ? "text-color-lightgreen"
        : "text-color-lightblue"),
    text:
      data?.averageSensorValues &&
      (data?.averageSensorValues[0]?.value >= 2000
        ? "Dangerous"
        : data?.averageSensorValues[0]?.value >= 1000
        ? "Comfortable"
        : "Cold"),
  };

  return (
    <AverageTemperatureContainer>
      <AverageTemperatureContainerIcon>
        <IconAndTypographyContainer>
          <img src={temperature} alt="co2-icon" width={40} height={40} />
          <Typography
            type={"p17r"}
            className="d-flex align-items-center font-weight-500 "
          >
            Temperature
          </Typography>
        </IconAndTypographyContainer>
        <h1>...</h1>
      </AverageTemperatureContainerIcon>
      {loading ? (
        <div className="position-relative mt-n5">
          <div className="loading-list mt-n4" />
        </div>
      ) : (
        data && (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              gap: "10px",
            }}
          >
            <div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "10px",
                    height: "50px",
                    alignItems: "flex-end",
                  }}
                >
                  <Typography
                    type={"p36b"}
                    className="d-flex align-items-center font-weight-600"
                    style={{ height: "38px", margin: "0" }}
                  >
                    {data?.averageSensorValues
                      ? data?.averageSensorValues[0]?.value.toFixed(2)
                      : "N/a"}
                  </Typography>
                  <Typography
                    type={"p20b"}
                    className="d-flex align-items-center font-weight-600"
                    style={{ margin: "0" }}
                  >
                    {data?.averageSensorValues
                      ? data?.averageSensorValues[0]?.unit
                      : "PPM"}
                  </Typography>
                </div>
                <Typography
                  type={"p20b"}
                  className={`d-flex align-items-center font-weight-600 ${sensorValueData.class}`}
                >
                  {sensorValueData.text}
                </Typography>
              </div>
            </div>
            <ChartComponentContainer
              style={{ textAlign: "center", fontFamily: "poppins" }}
              primaryXAxis={{
                valueType: "Category",
                labelStyle: { fontFamily: "poppins", color: "#fff" },
                majorGridLines: { width: 0 },
                labelIntersectAction: "Rotate90",
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 },
                lineStyle: { width: 0 },
              }}
              height="200"
              width="400"
              chartArea={{ border: { width: 0 } }}
              primaryYAxis={{
                labelStyle: { fontFamily: "poppins", color: "#fff" },
                minimum: 5,
                maximum: 30,
                interval: 5,
                labelFormat: "{value}°C",
                lineStyle: { width: 0 },
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 },
                stripLines: [
                  { start: 12, size: 2, color: "#94E8E8", sizeType: "Pixel" },
                  { start: 25, size: 2, color: "#FE5F5C", sizeType: "Pixel" },
                ],
                majorGridLines: { width: 0 },
              }}
              tooltip={{ enable: true, textStyle: { fontFamily: "poppins" } }}
            >
              <Inject
                services={[
                  LineSeries,
                  Legend,
                  Tooltip,
                  DataLabel,
                  Category,
                  MultiColoredLineSeries,
                  SplineSeries,
                  StripLine,
                ]}
              />
              <SeriesCollectionDirective>
                <SeriesDirective
                  dataSource={data1}
                  xName="x"
                  yName="y"
                  width={2}
                  type="MultiColoredLine"
                  pointColorMapping="color"
                  emptyPointSettings={emptyPoint}
                />
              </SeriesCollectionDirective>
            </ChartComponentContainer>
          </div>
        )
      )}
      <TypographyContainer>
        <Typography
          type={"p13r"}
          className="d-flex align-items-center font-weight-500 opacity-60"
        >
          The range of 20°C to 25°C is widely accepted as a comfortable range
          for most indoor activities, including sleeping, studying, and working
        </Typography>
      </TypographyContainer>
    </AverageTemperatureContainer>
  );
};

export default TemperatureWidget;