chart.js

问题 Is there anyway I can customize the X-axis label to words instead of numbers scale? I tried inserting the labels attribute in my data, but it doesn't work. this is my code: var bubbleChartData = { datasets: [ { label: "My First dataset", backgroundColor: randomColor(), data: [4, 2, 3, 4, 5] }], labels: [ "Bad", "Average", "Good", "Very Good", "Perfect" ] }; window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myChart = new Chart(ctx, { type:

问题 I am using the latest version of Angular 2, V4.0.0 and I want to use graphs from the Chart.js library in my project without many complications. How can I implement Chart.js in my angular project that does not give me problems in the final production? 回答1: You can implement Chart.js in a simple way with the following instructions: 1. Create a new project with angular-cli, skip if you already have one created ng new example-chartjs 2. Install Chart.js in your project npm install chart.js --save

问题 I'm using Chart js version: 2.1.4 and I'm not able to limit the bar width. I found two options on stackoverflow barPercentage: 0.5 or categorySpacing: 0 but neither of one works with the mentioned version. Is there a way to solve this issue without manually modifying the chart.js core library? thanks 回答1: You were right : The attribute you have to edit is barPercentage . But maybe the error comes from where you edited the value. As you can see in the bar chart options : Name : barPercentage -

问题 I am making a radar chart with Chart.js , but it only gets as big as the biggest value that's in it. I want it to be set to a standard max value, so the range is 0 to 100, and you can see how your progress is on different topics. Does anyone know how to set a max range of value to the radar chart with Chart.js ? (I tried just adding an extra dataset that's set to 100 and making it invisible, but than you see that data if you hover over the points in the radar, so that doesn't really look

问题 Hi all, Hopefully this is an easy one. I've set up a legend with an onclick event but would like the mouse cursor to change to "pointer" when I hover over the labels (see chart screenshot above). Currently it's hard to tell that the labels are links because the mouse cursor doesn't change when I hover over them. Also how do I add some margin/padding between the legend and chart (space below the legend). Many thanks! 回答1: You can achieve the desired behavior using a combination of the legend

问题 I am trying to hot swap chart types based on select box changes. If data needs to be updated, it changes. So for example, on page load I create a chart like this: var config = { type: 'line', data: { labels: this.labels, datasets: [{ label: 'Some Label', data: this.values }] }, options: { responsive: true } } var context = document.getElementById('canvas').getContext('2d'); window.mychart = new Chart(context, config); But then I change the combo box to a bar chart. I have tested the data with

问题 I've been trying to add a vertical line that shows up with a tooltip when hovering over the chart. But I'm using chart.js 2.6 and the syntax from 1.x seems to be outdated. I've the following code working for 1.x var data = { labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], datasets: [{ data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] }] }; var ctx = document.getElementById("LineWithLine").getContext("2d"); Chart.types.Line.extend({ name: "LineWithLine",

问题 I have a problem with javascript array when passing into another object array. I have tried everything I came out on net, but nothing is working. Problem is in line when fetching data from api on dataValues[dataValues.length] = (v.potroseno_tekucine); . Its working with labelValues. When I alert data in loop its ok, but when it needs to be processed it looks like its undefined. But when I, for example, alert(dataValues.length) before var data, its working ok. $(document).ready(function () {

问题 Im creating a Pie chart using chartjs library, and Im wondering how I could represent the values the will be need to render the chart dynamically, In chartjs.org tutorial the array of data is represented like this var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", labelColor : 'white', labelFontSize : '16' }, { value: 100, color: "#46BFBD", highlight: "#5AD3D1", labelColor : 'white', labelFontSize : '16' }, { value: 100, color: "#FDB45C", highlight: "#FFC870", labelColor :

问题 I'm using chart-js/ng2-charts for an angular 2 app. I can display a bar graph, but at the moment, all the bars are the same color. I'd like to have a different color depending on the value. Can that be done? 回答1: After you create your chart, you can use the following function to loop through the dataset and change the color depending on the data value. In this example, if the value is above a 50, the color changes to red. var colorChangeValue = 50; //set this to whatever is the deciding color