Пользовательская визуализация Power BI: создание линейной и точечной диаграммы

Question

Я создаю пользовательский визуал Power BI, который объединяет линейную и точечную диаграммы.Приведенное ниже объяснение чрезвычайно подробное, но конечный результат, к которому я стремлюсь, идентичен этому примеру, который я создал в Excel:

В частности, на диаграмме будет показана сериязаработная плата с точками, обозначающими, где в пределах этой заработной платы падает данный работник.Например, уровень оплаты 1 может варьироваться от 20 000 до 25 000 долларов, а работник, зарабатывающий 22 500 долларов, будет размещен непосредственно в центре этого уровня оплаты.Сложность этого, однако, заключается в том, что вместо осей, имеющих суммы в долларах, они должны представлять ширину диапазона.В приведенном выше примере ширина диапазона составляет (25 000–20 000) / 20 000 или 0,25, поэтому мне нужно, чтобы линия включала точки в точках (-125, 1) и (0,125, 1) и точку сотрудникабыть в точке (0,1), так как он находится в средней точке диапазона.(Чтобы получить 0 для значения y этого сотрудника, математика будет ((22500-20000)/20000) - (25000-20000)/20000/2)

Так что я бы хотел две строки (одну для минимальной заработной платы и одну для максимальной) вместе с точечной диаграммой.

В настоящее время я использую viewModel со статическими данными и добавлю привязку данных, как только я успешно построю диаграмму. Похоже, что график разброса работает, и полный код здесь .

Я сейчас пытаюсь добавить строку. Я перебираю все оценки и создаю массив, который включает в себя правильно масштабированный номер оценки и половину ширины оценки. Так что теперь мне нужно добавить двастрок. У каждого будет каждое значение в массиве Grades. У другого будет каждое значение в массиве Grades, но значение gradeWidth будет умножено на -1.

    interface Grade {
        grade: number,
        gradeWidth: number
    };

    var Grades: Array<Grade>[];

    for(var i = viewModel.minGrade; i = viewModel.maxGrade; i++) {
        for(var j = 0; j <= viewModel.dataPoints.length; j++) {
            if(viewModel.dataPoints[j].grade == i) {
                var temp = [{grade: yScale(i), gradeWidth: xScale((viewModel.dataPoints[j].rangemax - viewModel.dataPoints[j].rangemin)/viewModel.dataPoints[j].rangemin/2)}]
                Grades.push(temp);
            }
        }
    }

Так что мой вопрос, как я могувзять этот массив оценок и сделать мои минимальные (x,y) = (-gradeWidth, grade) и максимальные (x,y) = gradeWidth, grade) строк?