Невозможно сделать группу серий сплошной, а другую группу серий — пунктирной. ⇐ Javascript

[Anonymous]

Сценарий использования
Моя линейная диаграмма MUI-X содержит массив серий как базовых, так и сравнительных значений. Для каждой базовой линии (от 1 до 1) будет существовать линия сравнения. Все базовые линии должны быть сплошными, а все линии сравнения — пунктирными. Так, например, у меня будут сплошные базовые линии «PTV», «GTV», «CTV», «body», «heart» и пунктирные линии сравнения «PTV», «GTV», «CTV», «body», «heart».
Я знаю, что каждая серия имеет метку и уникальный идентификатор. Я строю серию следующим образом:
boost::json::object dvhObj;
dvhObj.emplace("id", "b_" + s->label());
dvhObj.emplace("label", s->label());
dvhObj.emplace("color", s->color().toHexRgb());
dvhObj.emplace("showMark", false);
dvhObj.emplace("data", getDVHPlotData(dvh));
seriesArray.emplace_back(dvhObj);

Примечание. В качестве идентификатора я просто добавляю «b_» для базовой линии перед меткой. Идентификатором будет "c_" + метка для значений сравнения, чтобы они были уникальными.
Проблема и ожидаемое поведение
Я знаю, что могу сделать ВСЕ линии на графике пунктирными, используя:


И я знаю, что могу сделать пунктиром отдельную строку, используя ее идентификатор:


Но эта методология требует, чтобы я заранее знал идентификаторы, чего у меня нет. Поэтому использование [data-series="c_PTV"] совершенно нецелесообразно.
Я ожидаю, что смогу установить для StrokeDasharray группы серий сплошной цвет, а для штрихDasharray группы серий сделать пунктир.
Вопрос
API LineSeries не позволяет мне устанавливать "lineStyle", например для API ChartsReferenceLine, и нет общего флага, который я мог бы использовать в API LineSeries, чтобы указать, что одна серия предназначена для базового уровня, а другая серия — для сравнения и должна быть сплошной или пунктирной в зависимости от этого флага. Итак, как мне это сделать? Кажется, что это должно быть так просто, но я не смог найти решение.
Для воспроизведения (в приложении React с использованием диаграмм MUI и MUI-X)
import {LineChart} from "@mui/x-charts/LineChart";
import {lineElementClasses} from "@mui/x-charts";

const seriesData = [
[100, 38, 36, 30, 37, 43, 44],
[100, 28, 27, 27, 33, 40, 35],
[100, 32, 26, 10, 27, 33, 34],
[100, 18, 17, 19, 20, 10, 25],
[100, 12, 8, 16, 24, 10, 0],
[100, 23, 17, 11, 8, 5, 2],
];
const syntheticData = [
{id: "b_CTV", label: "CTV", showMark: false, data: seriesData[0]}, // Should be solid
{id: "c_CTV", label: "CTV", showMark: false, data: seriesData[1]}, // Should be dashed
{id: "b_PTV", label: "PTV", showMark: false, data: seriesData[2]}, // Should be solid
{id: "c_PTV", label: "PTV", showMark: false, data: seriesData[3]}, // Should be dashed
{id: "b_GTV", label: "GTV", showMark: false, data: seriesData[4]}, // Should be solid
{id: "c_GTV", label: "GTV", showMark: false, data: seriesData[5]}, // Should be dashed
];
const xLabels = [0, 1, 2, 3, 4, 5, 6];

const Plot: React.FC = () => {
return (

);
};
export default Plot;


Подробнее здесь: https://stackoverflow.com/questions/798 ... -to-dashed