Power BI自定义视觉：创建折线图和散点图

Question

我正在创建结合了折线图和散点图的Power BI自定义视觉。下面的解释非常详细，但是最终的结果与我在Excel中创建的示例相同：

具体而言，该图表将显示一系列薪资等级，并用圆点表示给定员工在这些薪资等级中所处的位置。例如，薪酬等级1的范围可能从20,000美元到25,000美元不等，而收入22,500美元的员工将直接置于此薪酬等级的中心。但是，这样做的复杂之处在于，它们需要代表范围宽度，而不是具有美元数量的轴。在上面的示例中，范围宽度为（25,000-20,000）/ 20,000或.25，因此我需要该行包括（-.125，1）和（.125，1）处的点以及员工的点由于他位于范围的中点，因此位于（0,1）。 （要得出该员工的y值为0，其数学公式为((22500-20000)/20000) - (25000-20000)/20000/2)

所以我想要两行（一个用于最低薪资等级，一个用于最高薪资等级），以及散点图。

当前，我正在使用带有静态数据的viewModel，一旦成功构建了图表，便会添加数据绑定。散点图似乎正在起作用，完整代码为here。

我现在正在尝试添加一行。我遍历所有成绩，并创建一个包含正确缩放的成绩编号和成绩宽度的1/2的数组。所以现在我需要添加两行。每个人在成绩数组中都会有一个值。另一个将在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);
            }
        }
    }

所以我的问题是，我怎样才能采用这个Grades数组并使我的最少(x,y) = (-gradeWidth, grade)行和最多(x,y) = gradeWidth, grade)行？