如何添加链接Apexchart Radialbar标签

时间:2019-09-24 18:21:21

标签: javascript apexcharts

我想将外部链接(https://www.google.com)添加到ApexChart Radialbar标签。这是一种简单的方法吗?例如,当我单击Vimeo时,它应该转到www.google.com。

这是html代码:

     <div id="chart">
       <apexchart type=radialBar height=350 :options="chartOptions" 
       :series="series" />
     </div>

     <script src="https://unpkg.com/vue/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>

这是JavaScript代码:

        var options = {
        chart: {
            height: 350,
            type: 'radialBar',
        },
        plotOptions: {
            radialBar: {
                offsetY: -10,
                startAngle: 0,
                endAngle: 270,
                hollow: {
                    margin: 5,
                    size: '30%',
                    background: 'transparent',
                    image: undefined,
                },
                dataLabels: {
                    name: {
                        show: false,

                    },
                    value: {
                        show: false,
                    }
                }
            }
        },
        colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
        series: [76,67,61,90],
        labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
        legend: {
            show: true,
            floating: true,
            fontSize: '16px',
            position: 'left',
            offsetX: 160,
            offsetY: 10,
            labels: {
                useSeriesColors: true,
            },
            markers: {
                size: 0
            },
            formatter: function(seriesName, opts) {
                return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
            },
            itemMargin: {
                horizontal: 1,
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                legend: {
                    show: false
                }
            }
        }]
    }

   var chart = new ApexCharts(
        document.querySelector("#chart"),
        options
    );

    chart.render();

这是jsfiddle链接: https://jsfiddle.net/9rjcv1de/

肯定有一种简单的方法,但我找不到。以前有经验的人可以帮忙吗?

0 个答案:

没有答案