I had created a project using vuejs+Vue-CLI and integrated echarts in it. Echarts are working well in all browsers but when I open it in IE-11 version, page can't load and it shows following error:
[object Error]{description: "Expected ')'", message: "Expected ')'", name: "SyntaxError", number: -2146827282, stack: "SyntaxError...", Symbol()_n.kyufm4c0tec: undefined, Symbol()_p.kyufm4c0tec: undefined, Symbol()_q.kyufm4c0tec: undefined, Symbol()_r.kyufm4c0tec: undefined, Symbol(Lang fallback)_m.kyufm4c0tec: undefined, Symbol(util.promisify.custom)_o.kyufm4c0tec: undefined}
Here is my code:
<template>
<ECharts :options="pie" style="width:300px; height:260px">
</ECharts>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
export default {
components: {
ECharts
},
data() {
return {
pie: {
backgroundColor: "transparent",
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: "Product Sales",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
data: [{
value: 1,
name: "Product A"
},
{
value: 2,
name: "Product B"
},
{
value: 3,
name: "Product C"
}
],
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "20",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
}
}]
}
};
}
};
</script>
what's an issue in IE browser I also searched for the solution and tried it but did't get the result.
Versions:
echarts-4.1.0,
vue-echarts: 3.1.1
Any help will be appreciated! Thanks
The documentation of vue-echarts-v3 does not inform it, but you have to add the echarts on your webpack (or any other bundler you are using) configuration as well.
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/vue-echarts-v3/src'), // Their suggestion https://www.npmjs.com/package/vue-echarts-v3
resolve('node_modules/echarts/lib'), // Not suggested, but required as well
]
},
Related
I'm attempting to export the chart as a picture. I just joined eCharts. Can someone explain how the export button operates? I need to download charts as image.
Here's what I try : Do I have something wrong?
<template>
<b-card title="Data Science">
<app-echart-bar:option-data="option"/>
</b-card>
</template>
<script>
import { BCard } from 'bootstrap-vue'
import AppEchartBar from '#core/components/charts/echart/AppEchartBar.vue'
export default {
components: {
BCard,
AppEchartBar,
},
data() {
return {
option: {
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
data: ['FB', 'IN', 'TW', 'YT',],
},
],
yAxis: [
{
type: 'value',
splitLine: { show: false },
},
],
grid: {
left: '40px',
right: '30px',
bottom: '30px',
},
series: [
{
name: 'Available',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: [22, 24, 20, 18]
},
{
name: 'Not Available',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: [12, 10, 14, 16]
},
],
},
}
},
}
</script>
Comp:
<template>
<e-charts
ref="line"
autoresize
:options="option"
theme="theme-color"
auto-resize/>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bar'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default { components: {
ECharts,
}, props: {
optionData: {
type: Object,
default: null,
}, }, data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
left: 0,
},
grid: this.optionData.grid,
xAxis: this.optionData.xAxis,
yAxis: this.optionData.yAxis,
series: this.optionData.series,
},
} }, }
</script>
The chart created by eCharts is shown below :
Can somebody assist me with adding a button or tell me whether I need to add a script to download an image.
Does not work like this:
<template>
<Bar
:chart-options="chartOptions"
:chart-data="$attrs['chart-data'] || chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Bar } from 'vue-chartjs/legacy'
import 'chart.js/auto'
export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart',
},
datasetIdKey: {
type: String,
default: 'label',
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: '',
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Object,
default: () => {},
},
},
data() {
return {
chartData: {},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Custom Chart Title',
},
},
}
},
}
</script>
tried editing even with this: https://codesandbox.io/s/exciting-ully-2wst65?file=/src/components/Bar.vue
but nothing works.
All info gathered from: https://vue-chartjs.org/api/
Registration of components are not needed if you import auto.
maybe some ideas?
You are using v2 syntax in v3, the internal plugins like the tooltip, title, legend and decimation have been moved from the options namespace to the options.plugins namespace.
So you need to nest the title options in a plugins object within the options object. Then it will work
For those like me, who are looking for a solution using vue-chartjs V4.
To show the Title you need to pass the plugin object, for example:
plugins: {
type: Array,
default: () => [Title]
}
and then pass into the chartOptions props the title configuration, for example:
chartOptions: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: "Chart Title",
},
},
}
sandBox full example:
I'm sorry for my poor English.
I'm trying to display a horizontal line in a graph using vue-chartjs and chartjs-plugin-annotation.
The graph appears and the options are applied, but the horizontal line does not appear because the settings in the annotation are not working.
If anyone knows how to fix this, please let me know.
The version and code is as follows
Chart.js v2.9.4
chartjs-plugin-annotation v0.5.7
Chart.js
import { Bar } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'
export default {
extends: Bar,
props: ["chartData", "options"],
mounted() {
this.addPlugin(chartjsPluginAnnotation),
this.renderChart(this.chartData, this.options)
}
}
**Vue**
<template>
<Chart :chartData="chartItems" :options="chartOptions"/>
</template>
<script>
import Chart from './Chart.js'
export default {
components: {
Chart
},
data() {
return {
chartItems: {
labels: ["12月", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"],
datasets: [{
label: "月ごとの数",
data: [9500, 12000, 19000, 15000, 9500, 5000, 10000, 14000, 9500, 8000, 4500, 7000],
backgroundColor: 'lightblue'
}]
},
chartOptions: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
gridLines: {
display:false
}
}],
yAxes: [{
display: true,
id: 'y-axis-0',
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
userCallback: (label, index, labels) => label.toLocaleString()
},
}]
},
annotation: {
annotations: [{
type: 'line',
id: 'hLine',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 9000,
borderWidth: 2,
borderColor: 'black'
}]
},
tooltips: {
enabled: false
},
animation: {
duration: 0
}
}
}
}
}
</script>
It seems like there might be problems with the annotations library in chartjs 2.9.4, try downgrading to 2.9.3
Git issue: https://github.com/chartjs/chartjs-plugin-annotation/issues/276
I am using echarts to draw a Heatmap
But giving me error!!
Error in mounted hook: "TypeError: Cannot read property 'type' of null"
mounted() {
this.initChart()
},
I am using the json data from here:
https://www.echartsjs.com/data/asset/data/hangzhou-tracks.json
Just took 1 data from the above link.
<template>
<div
:id="id"
:class="className"
:style="{height:height,width:width}"
/>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'newCustomerForecastChart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null,
dataArr: [
{
"coord":
[
120.14322240845,
30.236064370321
],
"elevation": 21
},
{
"coord":
[
120.14280555506,
30.23633761213
],
"elevation": 5
}
]
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
var points = [
{
"coord":
[
120.14322240845,
30.236064370321
],
"elevation": 21
},
{
"coord":
[
120.14280555506,
30.23633761213
],
"elevation": 5
}
]
this.chart = echarts.init(document.getElementById(this.id))
var colors = ['#5793f3', '#d14a61', '#675bba'];
this.chart.setOption({
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
}
}
</script>
What is the problem actually?
should use
import * as echarts from 'echarts'
imstead of
import echarts from 'echarts'
While using the chart.js and the plugin chartjs-plugin-annotation, annotations are not showing while using angular 5, no error messages are displayed.
I have created a cut down example of code that exhibits the problem
console.log(Chart.plugins) shows the plugin looks to be registered as plugin[3] however it doesn't have an id as the inbuilt ones do, is this a problem?
chart.component.ts
import { Component, Inject } from '#angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-annotation';
#Component({
selector: 'app-chart-component',
templateUrl: './chart.component.html'
})
export class ChartComponent {
public currentCount = 0;
chart : Chart ; // This will hold our chart info
simpleChart() {
console.log(Chart.plugins);
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: ['0','1','2', '3','4'],
datasets: [
{
data: [0,1,2,5,4,5],
borderColor: "#3cba9f",
fill: false,
},
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true,
id: 'y-axis-0'
},
]
},
plugins: {
annotation: {
annotations: [{
type: 'line',
id: 'hLine',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2.5, // data-value at which the line is drawn
borderWidth: 2.5,
borderColor: 'black'
}]
}
}
}
});
}
ngOnInit() {
this.simpleChart();
}
}
Any assistance would be greatly appreciated.
I had some fun trying to get annotations working - in case you haven't already solved it, try this...
Change your imports statement to:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Change ngOnInit() to:
ngOnInit() {
let namedChartAnnotation = ChartAnnotation;
namedChartAnnotation["id"]="annotation";
Chart.pluginService.register( namedChartAnnotation);
this.simpleChart();
}
Lastly, I believe the annotation object is supposed to be a child of options, not plugins. Mine looks like this:
"options": {
"legend": {
"display": true
},
"scales": {
"xAxes": [{
"display": true
}
],
"yAxes": [{
"display": true,
"ticks": {
"min": 0,
"max": 40
}
}
]
},
"tooltips": {
"enabled": true,
"backgroundColor": "#eee",
"titleFontColor": "#000"
},
"annotation": {
"annotations": [{
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 0,
"yMax": 15,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(200,60,60,0.25)",
"borderColor": "rgba(200,60,60,0.25)"
}, {
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 30,
"yMax": 40,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(60,60,200,0.25)",
"borderColor": "rgba(60,60,200,0.25)"
}
]
}
}
Makes for a pretty graph :)
(except I got the colours bass ackwards! Oops!)
As an adition of what Ade said. You can also add the plugin this way
import { ChartOptions } from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
this.chart = new Chart('canvas', {
...
options: {
...
annotation: { ... }
} as ChartOptions,
plugins: [ChartAnnotation]
});
Adding the {...} as ChartOptions makes that TypeScript doesn't complain
To anyone having a TypeScript error saying that annotation isn't a ChartOptions property. After looking for an answer for a week or two I found a way to fix the issue.
Follow this path: node_modules/#types/chart.js/index.d.ts
Open index.d.ts, locate interface ChartOptions {
and add this line.
annotation?: Object;
}
This is how I fixed my issue after every other solution failed.
I have the same problem recently, I fixed it by registerPlugin under constructor.
Here is my solution:
import the plugin to your component:
import * as annotations from 'chartjs-plugin-annotation';
add this line to your constructor:
constructor(...) { BaseChartDirective.registerPlugin(annotations);}
If you are using typescript you may need to extend the ChartOptions interface with annotation:
interface CustomizeChartOptions extends ChartOptions {
annotation?: any
}
config your chartOptions with annotation
public barChartOptions: CustomizeChartOptions = {
// your other ChartOptions setting here
annotation: {
annotations: [
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '1 Dec',
borderColor: 'red',
borderWidth: 2,
label: {
content: 'CURRENT',
enabled: true,
position: 'top'
}
}
]
}
};
I know I am late, but, as of now (ng2-charts 3.0.11), these answers are not working as the API changed. The annotation configuration must now be in plug-ins.
The annotation plug-in must be registered before being used.
Here is what i found, from the examples:
in app.module.ts:
import { NgChartsModule } from 'ng2-charts';
import { default as Annotation } from 'chartjs-plugin-annotation'
// ...
imports: [
//...
NgChartsModule.forRoot({
defaults: {},
plugins: [ Annotation ]
}),
// ...
and then, in your component.ts file:
chartOptions: ChartConfiguration['options'] = {
scales: {
// ...
},
plugins: {
annotation: {
annotations: [
{
type: 'line',
scaleID: 'y',
value: 16,
borderColor: 'green',
borderWidth: 6
},
]
}
},
}