[front end / chart.js] various attribute records (2 / multi graph alert)

Catalog

Said ahead

Test code

  • html
    (I put canvas in a div)
    <canvas id="testCanvas" width="80%" height="20%"></canvas>
    
  • javasript
    <script src="static/js/Chart.js"></script>
    <script type="text/javascript">
        var ctx = document.getElementById("testCanvas").getContext("2d");
        var data = {
            type: "line",
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7"],
                datasets: [{
                        label: "data1",
                        data: [20, 59, 80, 81, 56, 56, 40]
                    }
                ]
            },
            options: {
                responsiveAnimationDuration: 5000
            }
        };
        //Establish
        var myLineChart = new Chart(ctx, data);
    </script>
    

Configuration

  • Animations

    • attribute
      Name data type Default value Explain
      duration number 1000 Animation duration
      easing string 'easeOutQuart' Specify the travel speed of the animation at different points, see jQuery UI API - Easings
      onProgress function null The function invoked in the animation continuous process
      onComplete function null Function called when animation is complete
    • Global access
      For example, Chart.defaults.global.animation.duration = 5000
    • options access
      options: {
      	animation: {
          	duration: 1000,
          	onComplete: function(){
      			alert("animation finished!");
      		}
          }
      }
      
    • easing
      see easings,Robert Penner's easing equations,jQuery UI API - Easings
          var easing_type = ['linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad',
              'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart',
              'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint',
              'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine',
              'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc',
              'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic',
              'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack',
              'easeInBounce', 'easeOutBounce', 'easeInOutBounce' ];
          var i = 0;
          setInterval(function () {
              i = (i) % easing_type.length;
              console.log(i);
              myLineChart.data.datasets[0].label = easing_type[i];
              myLineChart.data.datasets[0].data.splice(0, 1);
              myLineChart.data.datasets[0].data.push(parseInt(Math.random() * 50) + 20);
              myLineChart.update({
                  easing: easing_type[i]
              });
              i = i + 1;
          }, 1500);*/
      
  • Layout

    • attribute
      Name data type Default value Explain
      padding number|object 0 Space between chart and canvas
    • Global access
      For example, Chart.defaults.global.layout.padding = 10
    • options access
      options: {
      	padding: {
          	top: 10
      	}
      }
      
  • Legend

    • Global access
      For example, Chart.defaults.global.legend.display = false

    • options access
      as

      options: {
      	legend: {
          	display: false
          	}
      	}
      
    • attribute

      Name data type Default value Explain
      display boolean true Show legend or not

      When set to false, you can see that the label of dataset does not display

      Name data type Default value Explain
      position string 'top' top, bottom, right, left

      When position is right

      Name data type Default value Explain
      align string 'center' Position of legend in row or column, start, center, end

      When position is top and align is start

      Name data type Default value Explain
      fullWidth boolean true Whether the legend needs to occupy the width of the entire canvas

      fullWidth is a good attribute, which seems to be useless. When used, it makes no difference

      Name data type Default value Explain
      onClick function Functions called when a tag is clicked
      onHover function Function called when the cursor enters the label
      onLeave function Function called when the cursor leaves the label
      // <h1 id='TitleID'>ChartJS TEST</h1>
      options: {
      	legend: {
          	onClick: function(){document.getElementById('TitleID').innerHTML="Click Item";},
              onHover: function(){document.getElementById('TitleID').innerHTML="In Item";},
              onLeave: function(){document.getElementById('TitleID').innerHTML="Out Item";}
                  }
              }
      

      Name data type Default value Explain
      labels object Label objects in legends
      options: {
          legend: {
              labels: {
              	boxWidth: 100, # The width of the small box next to the label
              	fontSize: 16,  # label font size
              	fontStyle: ,   # label font style
              	fontFamily: ,  # label font style
              	padding: ,     # label small box spacing
              	generateLabels: ,
              	filter: ,
              	usePointStyle: ,
                  fontColor: 'rgb(255, 99, 132)'
              }
          }
      }
      
    • There are too many things. It's a little bit of a card. Please refer to the official website for other details

  • It is too laggy. Take it apart.

113 original articles published, 46 praised, 40000 visitors+
Private letter follow

Tags: Attribute JQuery Google Javascript

Posted on Mon, 09 Mar 2020 02:35:54 -0400 by truegilly