chart.js

问题 I am building a series of doughnut charts and I would like to remove the second item in the legend, so when I generate the legend with the generateLegend() method I just want to get the first value. In the documentation there is an option that reads Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data But I can't find an example how to use it. In this Pen you can see the 2 labels in the middle, I just want to show the first label. I tried different

问题 I have a doughnut graph created using Chart.js with two datasets. The graph displays the number of employees in offices around the world, with the second dataset breaking this down into permanent and contract employees. There's a jsfiddle of this running here: https://jsfiddle.net/tetsujin1979/tt3ch8z7/ The "labels" attribute of the options for the graph contains the names of the offices, but since there is only one array of labels, they are repeated for the second dataset, and appear on the

问题 I'm looking to be able to link the x-labels in a Chart.js bar chart. I've searched pretty thoroughly, and ended up trying to come up with my own solution: because the labels correspond to the bars directly above them and Chart.js has a built in getBarsAtEvent(evt) method, I tried creating an event if the user didn't click on a chart - this new event had pageX and pageY that was directly above the initial click such that if the user had clicked on a label, the new event would simulate a click

问题 I have two pie charts with different data but same labels and background colors. How can I create a standalone legend (a legend without a chart) using ChartJS so that the legend corresponds to both the pie charts at the same time? I tried creating a pie chart with the data array set to an array of 0s. However, that causes an empty pie chart to be generated, which takes up a lot of space; so that's a no go. Any help would be deeply appreciated. 来源： https://stackoverflow.com/questions/51610867

问题 I am trying to hide a tooltip in chart.js whenever the name of clicked object is "Something". I have already tried this: this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { type: 'doughnut', data: { datasets: [{ label: _.map(this.dataService.AmTimeSlots, 'ProjectName'), data: _.map(this.dataService.AmTimeSlots, 'Duration'), backgroundColor: _.map(this.dataService.AmTimeSlots, 'Color'), hoverBackgroundColor: _.map(this.dataService.AmTimeSlots, 'HoverColor'), borderColor: _.map

问题 I have issues to get the chart.js line chart to be responsive on the height aswell as the width. See example what it should be working like: http://www.chartjs.org/samples/latest/charts/line/basic.html Here is my code: var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : ['January','February','March','April','May','June','July'], datasets : [ { label: 'My First dataset', labelColor : '#fff', fontColor : '#fff' , backgroundColor : 'rgba

问题 I'm using Chart.js and I'm trying to move the labels on my Pie chart outside of the pie area (see red X's): This my code right now: <div class="container" id="pieContainer"> <h4 class="title">Title</h4> <center><canvas id="pie"></canvas></center> </div> <script> var pieData = [ { value: 39, color:"#335478", label: "Blue" }, { value : 4, color : "#7f7f7f", label: "Grey" }, { value : 57, color : "#99cb55", label: "Green" } ]; var optionsPie = { responsive : true, tooltipEvents: [], showTooltips

问题 data: { labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'], datasets: [{ pointRadius: 0, label: 'Positive', lineTension: 0, data: [{'x': '15 Nov, 18', 'y': 18636}], borderWidth: 1, backgroundColor: 'rgba(0, 255, 0, 0.5)', },{ pointRadius: 0, label: 'Negative', lineTension: 0, data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15

问题 I'm building an app using AngularJS. In this app I want to show a line-chart with some data. I got a page with two 'tabs'. I used my own implementation for this: Two buttons at the top, $scope.graph.visible boolean which is being set by clicking those buttons. This is the chart in the HTML: <canvas data="{{graph.data}}" labels="{{graph.labels}}" options="{{graph.options}}" legend="{{graph.legend}}" ng-show="{{graph.visible}}"> </canvas> In the controller I got this: $scope.graph.data = [1, 2,

问题 I am rendering a chart inside an angular2 attribute directive (an approach taken by the angular2 team). This approach works with chart.js but not chart.js 2.x code for attribute directive is ... import {Directive, ElementRef, Input} from '@angular/core'; declare var Chart:any; @Directive({ selector: '[bargraph]' }) export class BarGraphDirective { el:any; myChart:any; constructor(element:ElementRef) { this.el = element.nativeElement; } ngAfterViewInit() { var canvas = this.el; var ctx =