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

Question

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

所以从 1 岁到 18 岁，你计算 BMI 并绘制它，看看你是否在 healthy/overweight/underweight 范围内。

我在 chart.js 图表中模拟了第 98 和第 50 个百分位线：

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)

所以现在我有了不同的区域（假设绿色是 "normal" 范围，红色是超重），我想绘制一些实际重量。

所以在 2 年时，您绘制 15.3。在 3 年你绘制 16.5，等等

我真的不需要折线图来可视化这些图，尽管如果这是唯一的方法，那是可以接受的。

理想情况下，我只想在图表上实际测量的位置放置 "X" 标记。

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

像这样：

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

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 的整数值（即那些已经是标签的值），你可以用一种更简单的方法来做到这一点——添加第三个系列，并将线条颜色设置为透明。

Fiddle - http://jsfiddle.net/sucfguw1/

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

Can I plot random points on a chart.js or Google Charts chart?

google-visualization

chart.js