chart.js

问题 Hello I'm trying to display graphics on my website from API, to display my graphic in column, I need to send him an object like this one data: [{ name: 'Data1', data: [ ['ALIONIVS', 1], ['GARCIC(I)VS', 1], ['NONIVS', 1], ['SERVERS,A', 1] ], }, { name: 'Data2', data: [ ['TVTOR', 1], ['FVSCINVS', 1], ['GVTAMVS / GVMATIVS', 1], ['SEVERINVS, -A', 1], ['TVSCVS, -A / TVSGVS', 1], ['VEIENTA', 1], ] } ], But I would like to have dynamic data I'm retrieving data from my api with axios. axios .get('..

问题 If I have 12 labels on a chart (one for each month), how can I just show the first 6 if other values are null ? I use max: 'Jun' for the moment but I'd like to automate this: when 'July' changes from null to a value, I'd like the max to become 'Jul'. Is it possible with ChartJS ? data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { spangaps: true, label: 'Exceptionnel', data: [1, 2, 3, 4, 5, 6, null, null, null, null, null, null]

问题 If I have 12 labels on a chart (one for each month), how can I just show the first 6 if other values are null ? I use max: 'Jun' for the moment but I'd like to automate this: when 'July' changes from null to a value, I'd like the max to become 'Jul'. Is it possible with ChartJS ? data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { spangaps: true, label: 'Exceptionnel', data: [1, 2, 3, 4, 5, 6, null, null, null, null, null, null]

问题 As answered here I'm using nested arrays to line break my labels on ChartsJS and it works fine but if I try to use nested arrays on my label (the object inside dataset) they won't line break. For example in this graph: I have 2 labels with new lines but if I try the same technique with my label (the legend above the graph) it won't line break. Here is the code for this graph: data: { labels: [ 'Utensilios para escrita e artes','Faz de conta','Jogos',['Materiais não estruturado','/de largo

问题 I have two time series for example: s1: 2017-01-06 18:39:30 100 2017-01-07 18:39:28 101 and s2: 2017-01-07 18:00:00 90 2017-01-08 18:00:00 105 I want to plot these in a Chartjs chart, however it seems that Chartjs only takes one x-axis array (or label in Chartjs terminology). So my question is what is the best way to plot both of these? My approach was to write a function (in python, although the language doesn't really matter for this part) that iterates through both time series and creates

问题 I've mapped chartData to a state property using vuex. What I'd like to do is update the chart when a dataset is updated. I have heard that it can be done with mixins or watchers but I don't know how to implement it. I understand that mixins creates a watcher but I don't know how it is used within vuex. Chartline.vue: <script> import { Line } from 'vue-chartjs' import { mapState } from 'vuex' export default { name: 'ChartLine', extends: Line, computed:{ ...mapState(['charData','options']) },

问题 In my projects i need to make my chart more responsive . I print table from chartjs data using too but i got garbage value in table . any other method is also appreciated var ctxP = canvasP.getContext('2d') var myPieChart = new Chart(ctxP, {type: 'line', data: { labels: JSON.parse(localStorage.getItem("label")), datasets: [ {label: "DFT", data: JSON.parse(localStorage.getItem("dft")), borderColor: "ORANGE",fill: false,markerType: "triangle"}, {label: "FUNCTIONAL", data: JSON.parse

问题 I came up with this Fiddle : https://jsfiddle.net/2s09hqLu/ which has stacked rounded chart as I wanted.But problem is when a value is 0 in data array.It doesnt make it rounded.I always want it to be rounded how can I do that? data: [20, 5, 0, 15, 12, 13] As you can see here on the yellow its flat not rounded.How can I solve this problem? 回答1: I have updated your Fiddle only line number 118 : https://jsfiddle.net/r7hvn2ox/ From: if (rounded){ To: if (rounded || this._chart.data.datasets[1]

问题 https://jsfiddle.net/43Tesseracts/qmhhc089/ For this chart's first dataset XPData , how do I set the legend style to use the point instead of the line? I'm hoping all I need to do is add: showLines: false according to the Scatter Line Chart docs, but I can't figure out where to put this setting. Here is the data set (see fiddle): var XPData = { label: 'XP Earned', //fill: false, //backgroundColor: "rgba(0,0,0,0)", //borderColor: "rgba(0,0,0,0)", pointBorderColor: "#444", pointBackgroundColor:

问题 Is there any way to set line color of specific sections in between two points in chart.js? I would like to color the section 00-07 gray, 07-15 red, and 15-23 blue. Here is what I am passing as the data attribute in the options object to initialize the chart: var chartData = { labels: [/* a single dimensional array of strings */], datasets: [ { label: '', data: [/* a single dimensional array of totals */], fill: false, backgroundColor: '#e7eaeb', borderColor: red } ] }; I think this is where I