chart.js

问题 I had to parse the scientific notation that was a result of implementing logarithmic scale to my graph but it printed out each value for each line in the graph. No method of steps seems to be working. RESULTING CHART IMG var packetsElement = $("#packetsGraph"); pckBarChart = new Chart(packetsElement, { type: 'bar', data: { labels: ["Received", "Errors", "Lost"], datasets: [{ label: '# of Packets', data: packetsArr, backgroundColor: [ 'rgba(55,102,245,0.3)', 'rgba(55,102,245,0.2)', 'rgba(55

问题 I have a Vue JS project using Webpack and need to import Chart.js. I have tried // import Chart from 'chart.js/Chart.min.js' This gives js errors when trying to use the library. 回答1: After you do npm install chart.js , You can simply use import Chart from 'chart.js' to import chart.js Hope it helps. 回答2: As seen on this issue, if you use Angular CLI you only need to add this to the scripts array in angular-cli.json : "../node_modules/chart.js/dist/Chart.bundle.min.js" Restart your application

问题 Well, I've learned how to render html graphics with the tag canvas recently. But filling in the data manually is a little painful ... I wanted to know if it is possible to get this data straight from an Excel spreadsheet using just JavaScript. This is my code so far ... <div> <canvas class="line-chart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <script> var ctx = document.getElementsByClassName("line-chart"); var dia = ["Dia 1", "Dia 2

问题 I am unable to find the solution to add the total count for Stacked horizontal bar chart ! codepen link: code link enter code here 回答1: You can use the following code to draw/add total count in your stacked horizontal bar chart : this.data.datasets[0].data.forEach(function(data, index) { var total = data + this.data.datasets[1].data[index]; var meta = chartInstance.controller.getDatasetMeta(1); var posX = meta.data[index]._model.x; var posY = meta.data[index]._model.y; ctx.fillStyle = 'black'

问题 I am using Chart.js Version: 2.7.3 My Chart Title has three rows. I'd like to make the top row font size 16 then the second 14 and the third 12. I'm not sure if it's possible and haven't found a way. Here is a portion of my code that defines the options for my Chart... options: { title: { display: true, // Supply the title as an array and each array index prints on a separate line in the title section text: ['My Chart','Last Month', 'Local Time'], fontSize: 16, callbacks: { drawTitle:

问题 I am using Chart.js Version: 2.7.3 My Chart Title has three rows. I'd like to make the top row font size 16 then the second 14 and the third 12. I'm not sure if it's possible and haven't found a way. Here is a portion of my code that defines the options for my Chart... options: { title: { display: true, // Supply the title as an array and each array index prints on a separate line in the title section text: ['My Chart','Last Month', 'Local Time'], fontSize: 16, callbacks: { drawTitle:

问题 I have an HTML page with around 10 charts generated by chart.js (so these are canvas elements). I want to be able to export the page content into a PDF file. I've tried using jsPDF's .fromHTML function, but it doesn't seem to support exporting the canvas contents. (Either that or I'm doing it wrong). I just did something like: $(".test").click(function() { var doc = new jsPDF() doc.fromHTML(document.getElementById("testExport")); doc.save('a4.pdf') }); Any alternative approaches would be

问题 We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath. In the below example I've gotten the x-axis how I want it by adding an extra item in the labels array and displaying a second x-axis in the options . But, because there's now an extra label, the bars are taking

问题 We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath. In the below example I've gotten the x-axis how I want it by adding an extra item in the labels array and displaying a second x-axis in the options . But, because there's now an extra label, the bars are taking

问题 I have a chart like this: Now I need to find the minimum and maximum labels that are inside a pan, when I zoom, for example: The minimum would be 2018-07-16 , and the maximum would be 2018-11-3 . For panning, I'm using this attribute: pan: { enabled: true, mode: 'x', onPanComplete: function(e) { console.log(e) } } If I look at the returned object, I see a lot of information about this pan. But I can't find relevant information to conclude these extremum labels. I thought the attribute