Add select event to Chart and updated docs
parent
ec6e5c727d
commit
048c2563e7
|
@ -674,14 +674,14 @@ body {
|
|||
|
||||
th {
|
||||
background-color: #d6dade;
|
||||
padding: 8px 14px;
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
border: solid 1px #d6dade;
|
||||
}
|
||||
|
||||
tbody{
|
||||
td {
|
||||
padding: 8px 14px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #eaecee;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="p-chart">
|
||||
<canvas ref="canvas" :width="width" :height="height"></canvas>
|
||||
<canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -60,6 +60,21 @@ export default {
|
|||
this.chart.destroy();
|
||||
this.initChart();
|
||||
}
|
||||
},
|
||||
onCanvasClick(event) {
|
||||
if (this.chart) {
|
||||
const element = this.chart.getElementAtEvent(event);
|
||||
const dataset = this.chart.getDatasetAtEvent(event);
|
||||
|
||||
if (element && element[0] && dataset) {
|
||||
this.emit('select', {originalEvent: event, element: element[0], dataset: dataset});
|
||||
}
|
||||
}
|
||||
},
|
||||
generateLegend() {
|
||||
if (this.chart) {
|
||||
return this.chart.generateLegend();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,10 +12,10 @@ import Chart from 'primevue/chart';
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>Chart Types</h3>
|
||||
<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".</p>
|
||||
<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; <b>pie</b>, <b>doughtnut</b>, <b>line</b>, <b>bar</b>, <b>radar</b> and <b>polarArea</b>.</p>
|
||||
|
||||
<h3>Data</h3>
|
||||
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
|
||||
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart. For more information refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
|
||||
<CodeHighlight>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
</CodeHighlight>
|
||||
|
@ -46,7 +46,7 @@ export default {
|
|||
|
||||
<h3>Options</h3>
|
||||
<p>While a series can be customized per dataset, general chart options are defined with options property.
|
||||
Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
|
||||
Example below adds a title and customizes the legend position of the chart. For all available options refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
|
||||
<CodeHighlight>
|
||||
<Chart type="line" :data="data" :options="options" />
|
||||
</CodeHighlight>
|
||||
|
@ -78,6 +78,7 @@ options: {
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>Any attribute such as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
|
@ -139,6 +140,60 @@ options: {
|
|||
<td>-</td>
|
||||
<td>Redraws the graph.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reinit</td>
|
||||
<td>-</td>
|
||||
<td>Destroys the graph first and then creates it again.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>generateLegend</td>
|
||||
<td>-</td>
|
||||
<td>Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>select</td>
|
||||
<td>
|
||||
event: original event<br>
|
||||
event.dataset: Selected dataset<br>
|
||||
event.element: Selected element<br>
|
||||
event.element._datasetIndex = Index of the dataset in data<br>
|
||||
event.element._index = Index of the data in dataset
|
||||
</td>
|
||||
<td>Callback to invoke when a tab gets expanded.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-chart</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue