Показывать число внутри круга точек в chart.js, когда две или более точек имеют общие значения x и y - PullRequest
Новая
       10

Показывать число внутри круга точек в chart.js, когда две или более точек имеют общие значения x и y

0 голосов
/ 04 апреля 2019

Я занимаюсь разработкой диаграммы с использованием библиотеки chart.js .Я должен показать точки с двумя записями набора данных, в которых некоторые точки могут иметь одинаковое положение x и y с другими точками во второй записи набора данных.

Как показано ниже, точка 30 является общей для обоих наборов данных.

Теперь я пытаюсь показать количество перекрывающихся точек внутри круга, в приведенном ниже случае точка 30 должнапокажите 2 число внутри зеленого круга.

Демонстрация Codepen:

https://codepen.io/VijayDhanvai/pen/ErJxeQ


Код: 

var lineChartData = {
    labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6", "Data 7"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(255,255,255,0)",
        pointColor: "rgba(255,0,0,0.5)",
        data: [20, 30 ]
    }, {
        fillColor: "rgba(151,187,205,0)",
         strokeColor: "rgba(255,255,255,0)",
        pointColor: "rgba(0,255,0,0.5)",
        data: [60, 30 ]
    }]
}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 10,
    bezierCurve: false,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "black"
});
.container {
  width: 80%;
  margin: 20px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

<div class="container">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>
...