HTML:
<div id="chartContainer"></div>
CSS:
#chartContainer {
height: 300px;
width: 100%;
}
Script
import * as CanvasJs from 'canvasjs'
export default {
data () {
var explodePie = (e) => {
if (typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === 'undefined' || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
e.dataSeries.dataPoints[e.dataPointIndex].exploded = true
} else {
e.dataSeries.dataPoints[e.dataPointIndex].exploded = false
}
e.chart.render()
}
var contentFormatter = (e) => {
if (e.entries[0].dataPoints.y === 0) {
return e.entries[0].dataPoints.name + '- Unallocated'
} else {
return e.entries[0].dataPoints.name + '-' + e.entries[0].dataPoints.y + 'K'
}
}
return {
section: {},
initialLoad: false,
mapmodel: [],
totalSize: '',
mapsections: [],
chartOptions: {
exportEnabled: true,
animationEnabled: true,
legend: {
cursor: 'pointer',
itemclick: explodePie
},
data: [{
type: 'pie',
dataPoints: [],
showInLegend: true,
toolTipContent: contentFormatter,
indexLabel: '{name} - {y}k'
}],
chart: null
}
}
}
}
dataPoints
0:
name: "BOOT"
y: 320
1:
name: "CONF"
y: 1024
2:
name: "BKUPCONF"
y: 0
3:
name: "OSIMAGE"
4:
name: "WWW"
y: 0
5:
name: "ROOT"
y: 0
6:
name: "WOLFPASS"
y: 0
length: 7
.
