Блог

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

Точка (753.17, 126.52) должна быть выделена маркером, в то время как остальная часть точки не должна быть выделена на линейном графике.

Ниже приведено изображение, на котором я хочу создать диаграмму, как показано ниже.

 <apex:page >
  <apex:includeScript value="{!$Resource.Chartjs}"/>
  <script language="JavaScript">
   window.onload = function displayLineChart() {
    var data = {
        labels: [669.426, 669.427,735.618,753.170,801.809],
        datasets: [
            {
                
                fillColor: "rgb(255,255,255)",
                strokeColor: "rgb(0,0,128,1.0)",
                pointColor: "rgba(176,196,222)",
                borderColor: "lightgreen",
                
               
                
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [0.00, 50, 100, 126.52, 200]
            },
            
        ]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = { 
            
            scale: {
   ticks: {
      display: false
   }
}
            };
    var lineChart = new Chart(ctx).Line(data, {
                
    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line 
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the scale line    
    scaleLineWidth : 2,

    //Boolean - Whether to show labels on the scale 
    scaleShowLabels : false,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels  
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour  
    scaleFontColor : "#666",    
    
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : false,
    
    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",
    
    //Number - Width of the grid lines
    scaleGridLineWidth : 1, 
    
    //Boolean - Whether the line is curved between points
    bezierCurve : true,
    
    //Boolean - Whether to show a dot for each point
    pointDot : true,
    
    //Number - Radius of each point dot in pixels
    pointDotRadius : 5,
    
    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,
    
    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,
    
    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,
    
    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,
    
    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,
    
    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null
    
});
      lineChart.defaults.scale.gridLines.display 
            
            
            = false;
            
  }
</script>
    <div class="box">
    <canvas id="lineChart" height="500" width="600"></canvas>
  </div>
    
</apex:page>
  

Я протестировал одно возможное решение сChart.js версия 2.8.0. Она основана на скриптовой опции и на отличном примере, который вы можете найти здесь.

Приведенный ниже пример представляет собой упрощенный и исполняемый html / js код, который вы можете протестировать, запустив его фрагмент (кнопка под кодом).

Ключом является строка radius : customRadius, , где customRadius ссылается на function customRadius( context ) , которая также есть в коде. Это потому, что radius является скриптовой опцией.

Функция сообщает приложению, чтобы радиус был равен 10, когда индекс равен 3 (метка ‘d’) или значение равно или больше 8.

 let ctx = document.getElementById( 'actual_chart' );
  new Chart(
    ctx,
    {
      type   : 'line',
      data   : {
        labels  : [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
        datasets: [
          {
            data: [ 0, 1, 1, 2, 3, 5, 8, 13 ]
          }
        ]
      },
      options: {
        legend  : {
          display: false
        },
        elements: {
          point: {
            radius : customRadius,
            display: true
          }
        }
      }
    } );

  function customRadius( context )
  {
    let index = context.dataIndex;
    let value = context.dataset.data[ index ];
    return index === 3 || value >= 8 ?
           10 :
           2;
  }  

 <!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>55468483</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>

<body>
  <canvas id="actual_chart"></canvas>
</body>

</html>  

Результирующая диаграмма выглядит примерно так:

Вы можете найти более подробную информацию о ссылках в первом абзаце этого ответа.

Пожалуйста, дайте нам знать, помогло ли это.