chart.js

问题 is there a way to get the nearest point when clicked anywhere on canvas? Maybe somehow harvest the core 'nearest' method? Thanks 回答1: I think you will find getElementsAtXAxis very helpful. Basically, getElementsAtXAxis has a very similar behaviour to getElementsAtEvent although when the click event doesn't intersect a point of the chart, it will return the nearest ChartElement. The only downside is that it will return all the ChartElement on the nearest x-axis index. So, if you use multiple

问题 I'm using charts.js . This is my chart: I have 3 or more datasets in the same chart, each with a different scale, let's image that all the scales are on the left. As default when deactivating a dataset (for example in this case clicking on "Sold Products") the scale is rescaled between [-1, +1] as here on multi-axis demo code too. Is there a way in which I can make disappear the dataset's scale when that dataset is deactivated? For example in this case if I deactivate "Sold Products", I would

问题 I'm using charts.js . This is my chart: I have 3 or more datasets in the same chart, each with a different scale, let's image that all the scales are on the left. As default when deactivating a dataset (for example in this case clicking on "Sold Products") the scale is rescaled between [-1, +1] as here on multi-axis demo code too. Is there a way in which I can make disappear the dataset's scale when that dataset is deactivated? For example in this case if I deactivate "Sold Products", I would

问题 Trying to get the Y axis scale labels to look like the image, to be position on top of the scale and not rotated. scale options currently look like: scales: { yAxes: [{ id: 'temp', scaleLabel: { display: true, labelString: '°C' }, type: 'linear', position: 'left' }, { id: 'ppm', scaleLabel: { display: true, labelString: 'ppm', }, type: 'linear', position: 'left', ticks: { stepSize: 500 } }, { id: '%', scaleLabel: { display: true, labelString: '%', }, type: 'linear', position: 'right', ticks:

问题 I have used chartjs in order to display chart, and I am using API to fetch my data and same is fed to the chart. Here is my Chart_from_API.vue <template> <div class="chart-container" style="position: relative; height: 25vh; width:100%;"> <div id="range-selector"> <input type="button" id="1m" @click="selectPeriod" class="period ui-button" value="1m" /> <input type="button" id="3m" @click="selectPeriod" class="period ui-button" value="3m" /> <input type="button" id="6m" @click="selectPeriod"

问题 Hello i am trying to display different charts using the chartjs by calling the API. Below code shows how i have formatted the chart.vue Chart.vue: <template> <div class="chart-container" style="position: relative; height: 40vh; width:100%;"> <slot name="test1"></slot> <slot name="test2"></slot> </div> </template> <script> export default { name: 'charts', data () { return { date: [], challenge: [], data: [] } }, mounted () { this.check(8, 'chart_8') this.check(7, 'chart_7') }, methods: { check

问题 I am trying to display particular chart in my App.vue from Charts.vue, Below is what I tried to achieve: Charts.vue <template> <div class="chart-container"> <canvas :ref="`chart${chartId}`"></canvas> </div> </template> <script> export default { props: { chartId: { type: String, required: true } } .... } </script> App.vue <template> <div class="content-1"> <chart :chartId="1" /> <-- Here i want to display my chart 1 </div> .... <div class="content-8"> <chart :chartId="8" /> <-- Here i want to

问题 I am trying to display particular chart in my App.vue from Charts.vue, Below is what I tried to achieve: Charts.vue <template> <div class="chart-container"> <canvas :ref="`chart${chartId}`"></canvas> </div> </template> <script> export default { props: { chartId: { type: String, required: true } } .... } </script> App.vue <template> <div class="content-1"> <chart :chartId="1" /> <-- Here i want to display my chart 1 </div> .... <div class="content-8"> <chart :chartId="8" /> <-- Here i want to

问题 I have a line chart in chart js. I want to give it a different background on the y axis say, 0-40 is red,40-70 is yellow and 70-100 is green. The limit for the y axis will always be 100. var scatterChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: ' Dataset', data: [{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 88 }, { x: 4, y: 5 }] }] }, options: { scales: { xAxes: [{ type: 'linear', position: 'bottom' }] } } }); How do i set the background? 回答1: There is not a built in

问题 I have a regular Chartjs doughnut chart with multiple datasets, using this code for the dataset: datasets: [ { label: 'Bugs', data: [ 60 , 6.6666666666667 , 33.333333333333 ], backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'], }, { label: 'Fixes', data: [ 60 , 0.44444444444444 , 39.555555555556 ], backgroundColor: ['#514463', '#8C75AB', '#eeeeee'], }, { label: 'Redesigns', data: [ 33.333333333333 , 10.37037037037 , 56.296296296296 ], backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'], } ] };