J'utilise Highcharts et je me demande s'il est possible pour highcharts de créer des graphiques circulaires comme ceux-ci:

Circular Charts

J'ai ceci, mais il remplit tout le cercle au lieu de seulement 60% du cercle (Voici le violon: http : //jsfiddle.net/fccuw47y/1/).

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Total",60]],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});
2
Get Off My Lawn 14 juil. 2015 à 04:54

2 réponses

Meilleure réponse

Nous venons d'implémenter un graphique similaire en utilisant le type solidgauge dans Highcharts.

Vous pouvez utiliser le diagramme à morceaux, mais un graphique à secteurs remplira toujours 100%. C'est la nature de la bête. Si vous vouliez utiliser un graphique à la pièce, vous devrez lui fournir le montant pour le reste (espace vide). Par exemple, votre series.data devrait être

[["Total", 60], ["Empty", 40]]

Voici un exemple utilisant le type de graphique solidgauge. C'est beaucoup plus flexible et semble être le choix le plus naturel dans ce cas.

http://jsfiddle.net/morqp9at/

4
Jake Myers 14 juil. 2015 à 02:53

Vous pouvez définir la couleur d'un point de données de série pour qu'elle soit transparente:

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [
               [ "Completed", 60],
               { 
                   "name": "Incomplete",
                   "y": 40,
                   "color": 'rgba(0,0,0,0)'
               }
            ],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

Cela donne un cercle "complet" avec la partie "Terminé" remplie.

1
Blakes Seven 14 juil. 2015 à 02:56