chart.js | 易学教程

How do I prevent the scale labels from being cut off in chartjs?

阅读更多关于 How do I prevent the scale labels from being cut off in chartjs?

问题 I am having a problem with chartjs where the scale labels are being "cut off" in the following way: [1] Is there a margin that can be set? I don't see anything in the chartjs documentation about this, and these seem to be contained within the chartjs canvas element (meaning: not covered by another div). 回答1: Add scale label option with whitespace before value . 2 or more whitespaces is allowed. scaleLabel: "<%= ' ' + value%>" 回答2: You can also set a padding in the layout configuration (in

How do I prevent the scale labels from being cut off in chartjs?

阅读更多关于 How do I prevent the scale labels from being cut off in chartjs?

In ChartJS is it possible to change the line style between different points?

阅读更多关于 In ChartJS is it possible to change the line style between different points?

问题 Using ChartJs (v2.2.2) can you change the line style between the last 2 points on a graph. e.g. have a solid line all the way and then dashed at the end? see picture below 回答1: The borderDashproperty ( scroll to Line Configuration ) is the key to your problem. The thing is, the full chart is drawn with a border dash, you cannot choose where it starts and where it ends. A simple workaround is to create two identical datasets. One dotted and one with a plain line. Then you remvoe the last data

Chart.js click on labels, using bar chart

阅读更多关于 Chart.js click on labels, using bar chart

问题 i need help with my Chart.js interactivity. When I click on the label, I need to return the column(index) number at which I clicked. I tried to use getElementsAtEvent but it only work if I click directly at chart. This http://jsfiddle.net/yxz2sjam/ is pretty much what I am looking for but getPointsAtEvent is no longer available in the new versions. canvas.onclick = function (evt) { var points = chart.getPointsAtEvent(evt); alert(chart.datasets[0].points.indexOf(points[0])); }; I also found

ChartJS charts not generating within tabs

阅读更多关于 ChartJS charts not generating within tabs

问题 I'm trying to use ChartsJS within a tabbing system. The first chart in the first tab is rendered, but subsequent charts are not. I believe this is because the tabs have display:none , so when the charts are first generated they are created in a div with zero dimensions. This fixes the issue, but breaks the tabs: .vertical-nav>div.tab-content { display: block !important; } With that in mind I've tried all kinds of ways to regenerate the charts after the tab is open, or force display:block just

How can configure my y-axis on chart.js?

阅读更多关于 How can configure my y-axis on chart.js?

问题 I am trying to build graph. My y-axis start with 0 here, I dont know how to configure it and why it is talking 0 - I see other post which mentioned scaleOverride:true, scaleStartValue:0.1, scaleStepWidth:5 - I dont know how to use that in my below code , how can configure y-axis in chart.js. Any pointer would be I have following code var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Dataset 1', backgroundColor: "rgba(220,220

Chart.js - Multiple Doughnut Charts on same Canvas

阅读更多关于 Chart.js - Multiple Doughnut Charts on same Canvas

问题 I´m trying to simulate a multi layer doughnut chart by initializing Chart.js multiple times over same canvas. There is only one chart visible at the time. The other will be visible when you hover over its position… Does somebody know how to make both visible at the same time? Here is my code: <!doctype html> <html> <head> <title>Doughnut Chart</title> <script src="../Chart.js"></script> <style> body{ padding: 0; margin: 0; } #canvas-holder-1{ position: fixed; top: 50%; left: 50%; margin-top:

How to wrap legend text in Chartjs?

阅读更多关于 How to wrap legend text in Chartjs?

问题 My ChartJs legend text is overflowing in the same line when the text is too long. Is there any parameter that I can use to enable text-wrap. legend : { display : true, position : 'bottom', fullWidth: false, labels : { fontColor : "#000", // boxWidth : "3" } } In other chart libraries like highcharts, you just have to set width and the text will be wrapped if it exceeds the width. Is there such an option in ChartJS? Highcharts Library Example: legend: { itemStyle: { width: 90 // or whatever,

Chart.js & Angular 2 - ng2-charts Custom on Click Event

阅读更多关于 Chart.js & Angular 2 - ng2-charts Custom on Click Event

问题 I am trying to implement ng2-charts in my Angular 2 project and I was wondering about creating custom onclick events. Meaning, I want to override the current onclick events on the carts to do some custom functions (redirect to a page, have a modal show up, etc). Is there a simple way to do this? Is it built in at all? Any insight would be appreciated it 回答1: Try to read DOCS They have pretty good and understandable explanation of use. There-are built-in 2 event handlers: Events chartClick :

Passing an Array from a Flask view to the javascript code of another view

阅读更多关于 Passing an Array from a Flask view to the javascript code of another view

问题 I have an array of data (it's a python list in my flask view) obtained after parsing a twitter feed. I want to use it to build a chart in another view. I succeeded passing it onto the Flask template tags of the next view, but I can't figure out how to use this data inside the javascript code that will build the chart using Chart.js For example: After researching on Google, I tried this to pass the array of the chart labels to javascript. The issue I have is that only the first element is