Question

我正在创建一个代表儿童发育中的百分位曲线的图表。

因此，从1岁到18岁，你采取计算的BMI并绘制它，看看你是否处于健康/超重/体重不足的范围。

我在图表中嘲笑了第98和第50个百分位线.js图表：

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
    datasets: [
                {
            label: "98th",
            fillColor: "rgba(254,162,116,1)",
            strokeColor: "rgba(0,0,0,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [20.88534167, 19.81059732, 19.21573931, 18.79199228, 18.69458621, 18.94370352, 19.468687, 20.19907676, 21.0399018, 21.92476198, 22.81691772, 23.69887299, 24.57539594, 25.43122437, 26.24504753, 26.99794153, 27.67845403, 28.28680281]
        },
        {
            label: "50th",
            fillColor: "rgba(92,195,105,1)",
            strokeColor: "rgba(0,0,0,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [17.644, 16.655, 16.133, 15.752, 15.547, 15.498, 15.564, 15.748, 16.037, 16.423, 16.892, 17.433, 18.037, 18.675, 19.317, 19.938, 20.519, 21.052]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, { 
    pointDot: false
});

(as you can see here)

所以现在我已经拥有了不同的区域（让我们说绿色的是＃34;正常＆＃34;范围，红色的任何东西超重），我想绘制一些实际的权重。

所以在2年时，你的情节是15.3。在3年你绘制16.5等等。

我并不需要折线图来显示这些图，但如果它是唯一的方法，那将是可以接受的。

理想情况下，我只想把＆＃34; X＆＃34;图表上的标记实际上是测量值。

我想我想要的是叠加在这些折线图上的散点图。

像这样：

您可以使用当前正在使用的Flot来执行此操作，但有一些单独的问题，我们会尝试迁移到chart.js或Google Charts。

Answer 1

如果您的散点将位于您已经绘制的区域内，您可以在onAnimationComplete回调中执行此操作

var scatterPoints = [
    { x: 2, y: 15 },
    { x: 5.5, y: 20 }
]

var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    // disable tooltips so that a redraw won't wipe out our scatter points
    // alternatively we could extend the chart and move the scatter point drawing into the draw override
    showTooltips: false,
    onAnimationComplete: function () {
        var self = this;
        var ctx = self.chart.ctx;

        // style
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "red";

        scatterPoints.forEach(function (scatterPoint) {
            ctx.fillText("x",
                // adjust x axis value if the x axis does not start at 0

                self.scale.calculateX(scatterPoint.x - Number(self.scale.xLabels[0])),
                self.scale.calculateY(scatterPoint.y));
        })
    }
});

如果您只有x的整数值（即已经是标签的那些），您可以更简单的方式进行 - 添加第三个系列，并将线条颜色设置为透明。

小提琴 - http://jsfiddle.net/sucfguw1/

我可以在chart.js或Google Charts图表上绘制随机点吗？

1 个答案: