chart.js

问题 I am creating project with ChartJs, and I am fetching real time data from the server. Each second, I add extra data point. After some time, there is just too many points on the graph, to the point that you cannot see anything. I would like to know, if there is a way to scroll through the x-variables, and always have set distance between the points? As of know, the distance between points is shrinking, making the graph not readable. Thanks! 回答1: I would like to know, if there is a way to

问题 I have a line chart much like this one: http://www.chartjs.org/samples/latest/charts/line/basic.html I would like to color the areas -100 < y < -40 and 40 < y < 100 a slight tint of red to indicate that point that fall in that area are in a danger zone. This was a quick sketch using paint. Anything similar to this is welcome. How can I do this? I tried looking into the documentation but found nothing. I currently have a workaround using a line chart stacked over a horizontal bar chart but it

问题 There are solutions to using legend onClick to toggle on/off visibility of (all other) datasets on the clicked chart , but I needed a way to sync this toggle on multiple charts if they have the same label/legend. For example, I have 6 charts presenting different information about the same data. However, not all the charts have all the datasets. One may have 5 datasets, another has 3 and so on. And they may not show up in the same order either. The goal was to be able to click a legend item on

问题 How do I create legends like the following: So far I have the following: I can't figure out how to specify labels for the legend. They don't provide examples either. https://www.chartjs.org/docs/latest/configuration/legend.html So far I have the following code: var topClickSourcesChart = new Chart('dashboard-click-source-chart', { type: 'bar', data: { labels: ["Facebook","Google","NONE",], datasets: [{ data: [10,5,3,], backgroundColor: ['#4D90C3', '#866DB2', '#EA6F98', '#61BDF6', '#768BB7'],

问题 This question builds on the previous question found here : ChartJS place y-axis labels between ticks. When drawing the ticks with a BeforeDraw plugin, the ticks/labels end up "jumping" every time the canvas is redrawn. If you run the code snippet and look at the y-axis labels as you hover on and off of the bars, you will be able to see this "jumping". Is there a way to prevent this "jumping" while still drawing the ticks with BeforeDraw? var barChart = new Chart(ctx, { type: 'bar', data: {

问题 I want to pan and zoom on a line chart with chartjs-plugin-zoom. The problem is that when I use pan it also zoom on chart till just one label remains, there is no problem when chart model is bar. how can I solve this problem? I want pan just to pan not zoom. this is a fiddle that works for bar chart but not works correctly for line chart: https://jsfiddle.net/pfd2on55/ var ctx = document.getElementById("canvas").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: [

问题 I've created a firefox addon with: My manifest includes: "content_scripts": [ { "matches": [ "..." ], "js": [ "moment.js", "jquery.js", "chartjs.js", "main.js" ], "run_at": "document_end" } ] main.js includes: var myChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: label, lineTension: 0, backgroundColor: color, data: data }] }, options: { scales: { xAxes: [{ type: "time", distribution: 'linear', time: { unit: "day" } }] } } }); This works in my Chrome extension, but when I

问题 Using chart.js 2, can the colors of the bars in a bar-cart be varied based on their value? For example, if the scale is 0 - 100, columns with 50% and above could be green, while 0-49% could be red. 回答1: As far as I know there is no configuration or callback for each individual point being drawn. The best way I can think of to do this would be to create a function that would modify your chart config/data object. This isn't the most elegant way to deal with the problem, but it would work. The

问题 I am trying to pass data from Controller to feed a chart using ChartJS, but when I use a keySet function as labels, the chart is not rendering. This is the Method from Controller: @GetMapping("/reports") public String showDashboard(Model model) { Map<String, Integer> data = new LinkedHashMap<String, Integer>(); data.put("JAVA", 50); data.put("Ruby", 20); data.put("Python", 30); model.addAttribute("data", data); return "reports"; } This is the HTML Code: <pre> <body> <div class="container">

问题 When using the following code to generate a chart, I am not able to set the scale to begin at zero, even setting that option. Here is the code (JSFiddle) var simpleChart = new Chart(document.getElementById('chart'), { type: 'bar', data: { labels: ['Online', 'Offline'], datasets: [{ label: "# of servers", data: [1, 7], backgroundColor: [ '#009245', '#c02a31' ] }] }, options: { title: { display: false }, scales: { yAxes: [{ beginAtZero: true }] } } }); Is this a bug? What should I do to be able