Data labels and numerical display skills of Vue statistical charts

Data labels and numerical display skills of Vue statistical charts

Statistical charts are a very important way of presenting data when developing web applications. Vue is a popular JavaScript framework that provides many convenient functions for manipulating and displaying data. In this article, we will explore how to use Vue to add data labels and numerical display to statistical charts.

1. Use data labels

Data labels refer to the values ​​corresponding to the data displayed on the chart. They help users understand the content of the diagram more clearly. Vue provides a Chart.jslibrary called Vue, which is a powerful charting library that can be used to create various types of charts, including line charts, bar charts, pie charts, etc. We use Chart.jsto create a simple line chart and add data labels.

First, we need to import Chart.jsthe library. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.jsIt can be imported into the HTML file via a CDN link :

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

 Next, we create a Vue component to display the line chart:

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Data",
              data: [12, 19, 3, 5, 2, 3, 11],
              borderColor: "rgba(75, 192, 192, 1)",
              fill: false
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }
  }
};
</script>

 

In the above code, we have used Chart.jsthe library to create a line chart. labelsThe array defines the abscissa of the chart, and datasetsthe array contains the data to be plotted. We labeldefine the name of the data label by setting the property.

1. Add value display

In addition to data labels, we can also display specific values ​​in the chart. To achieve this functionality, we can use Chart.jsthe provided callback function. In the callback function, we can customize the format and position of the value.

The following is a sample code that shows how to use a callback function to add a value prompt to a line chart:

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Data",
              data: [12, 19, 3, 5, 2, 3, 11],
              borderColor: "rgba(75, 192, 192, 1)",
              fill: false
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  callback: function(value, index, values) {
                    return value + "%";
                  }
                }
              }
            ]
          },
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var value = dataset.data[tooltipItem.index];
                return value + "%";
              }
            }
          }
        }
      });
    }
  }
};
</script>