Могу ли я построить случайные точки на диаграмме chart.js или диаграмме Google Chart?

Question

Я создаю диаграмму, представляющую собой критические точки в развитии ребенка.

Итак, от 1 до 18 лет, вы принимаете окурированный ИМТ и замышляете его, и смотрите, находитесь ли вы в здоровом/избыточном/недостаточном весе.

я издевался до 98-я и пятидесятого центиль линии в chart.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)

Так что теперь у меня есть разные регионы (скажем, что-нибудь в зеленом цвете «нормальный» диапазон, все в красном - лишний вес), я хочу нарисовать некоторые фактические веса.

Итак, на 2 года вы планируете 15.3. Через 3 года вы планируете 16.5 и т. Д.

Мне не нужна линейная диаграмма, чтобы визуализировать эти графики, хотя это было бы приемлемо, если это единственный способ сделать это.

В идеале, я просто хочу поместить метки «X» на диаграмму, где на самом деле измерения.

Я предполагаю, что я хочу, это диаграмма рассеяния, наложенная на эти линейные диаграммы.

Как это:

Вы можете сделать это с 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)); 
     }) 
    } 
}); 

Если вы только собираетесь иметь целые значения х (то есть те, которые уже ярлыки) вы можете сделать это проще - добавьте третью серию с цветом линии, установленным на прозрачный.

---

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

---