chart.js

问题 i am creating a JavaScript web page with two doughnut charts. to create the charts i'm using one function and calling it twice with different data for each chart. however when i do that the text in the middle of the doughnut chart is being changed for both charts not only for current one. how can i write the text individually for each? this is my code function chart(dummynames, dummyValues, dummyColors, percentage, id) { //dummy names, dummy values and dummy colors are arrays new Chart

问题 Im having some trouble with ChartJs and hope you can help. I would like to create a Bar Chart where: Zero Lables that only contains dataset with zeros are not showing If only one data value in a chart it is cen I have added the code example here at codepen: Link to ChartJs CodePen var Canvas = document.getElementById("myChart"); var Data1 = { label: 'Project A', data: [10, 0, 10, 0 ,0 ,0 ,10], backgroundColor: 'rgba(0, 99, 132, 0.6)', borderWidth: 0, yAxisID: "y-axis" }; var Data2 = { label:

问题 I have developed a single Stacked bar with three section or data source. I want to know which section I have clicked. This is my code .ts file this.chart = new Chart("Chart1", { type: 'bar', data: { datasets: [{ label: 'Data1', data: [27], }, { label: 'Data2', data: [40], }, { label: 'Data3', data: [12], } ], } }); showData(evt:any){ var data = this.chart.getElementsAtEvent(evt) console.log(data[0]._model); // it prints the value of the property } In the data I am not getting data object

问题 I have developed a single Stacked bar with three section or data source. I want to know which section I have clicked. This is my code .ts file this.chart = new Chart("Chart1", { type: 'bar', data: { datasets: [{ label: 'Data1', data: [27], }, { label: 'Data2', data: [40], }, { label: 'Data3', data: [12], } ], } }); showData(evt:any){ var data = this.chart.getElementsAtEvent(evt) console.log(data[0]._model); // it prints the value of the property } In the data I am not getting data object

问题 How scale sector in doughnut chartjs on hover? Example: 回答1: The simplest solution would be to define different borderWidth and hoverBorderWidth on your dataset as follows. new Chart(document.getElementById('myChart'), { type: 'doughnut', data: { labels: ['red', 'green', 'gray', 'blue'], datasets: [{ label: 'My First dataset', backgroundColor: ['red', 'green', 'gray', 'blue'], borderColor: 'white', data: [3, 4, 5, 3], borderWidth: 4, hoverBorderWidth: 0, borderAlign: 'center' }] }, options: {

问题 I have two y-axis in my charts.js scatter chart, and all my data is displayed correctly. However, whilst the label for the first y-axis is showing, the label for the second y-axis is not. Here's my code: window.laChart = new Chart(ctx, { type: 'scatter', data: { datasets: allDatasets }, options: { scales: { xAxes: [{ scaleLabel: { display: true, labelString: X_AXIS_LABEL }, ticks: { min: 0, max: 18, stepSize: 1, // Format the x-axis values callback: function(value, index, values) { return

问题 In one html page, I have a select menu (a,b,c,d) and a bar chart (bar a,b,c,d). What I want to do is to highlight the corresponding bar in the bar chart that is selected in the select menu. 回答1: You can attach the logic to your onchange handler document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect")); and if you want to call it programmatically (say, if you have an initial value set) document.getElementById("mySelect").onchange(); Here's the logic

问题 In one html page, I have a select menu (a,b,c,d) and a bar chart (bar a,b,c,d). What I want to do is to highlight the corresponding bar in the bar chart that is selected in the select menu. 回答1: You can attach the logic to your onchange handler document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect")); and if you want to call it programmatically (say, if you have an initial value set) document.getElementById("mySelect").onchange(); Here's the logic

问题 I'm trying to build a chart in chart.js, showing price data of a virtual item, with a line chart showing pricing, and a backlay bar chart, showing sales volume, like this: My issue is, the y-axis is the same for both, meaning the price data is shown at the bottom with unnoticeable differences, since the volume is in the hundreds. I want the price data to be on the y-axis, with the bars shown relatively, with the highest volume being shown as 100% height, not the values on the y-axis,

问题 I'm trying to build a chart in chart.js, showing price data of a virtual item, with a line chart showing pricing, and a backlay bar chart, showing sales volume, like this: My issue is, the y-axis is the same for both, meaning the price data is shown at the bottom with unnoticeable differences, since the volume is in the hundreds. I want the price data to be on the y-axis, with the bars shown relatively, with the highest volume being shown as 100% height, not the values on the y-axis,