Highchart 切片

Question

我有一个简单的，我想将一个名称的变量分成一个切片高图表尝试使用数据。map 使用索引和项目，直接数据

正如你在这里看到的，切片得到了所有切片的所有名称，但每个切片可能有一个名称，所以请你帮帮我

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


<div id="container"></div>
    <script type="text/javascript">
    var resp = [];
    var resp2 = [];
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data=>{
      data.forEach(res=>{
        // console.log(res.name);
        resp.push(res.name)
        resp2.push(Math.random());
        console.log(resp,resp2);
    })
    console.log('-->',resp)
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Nacimientos Datos por Comunidades Autónomas, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: resp,
            colorByPoint: true,
            data: resp2
            
        }]
    });

      
        });
    </script>


</html>

Answer 1

您需要为点设置名称，而不是为系列：

resp2.push([res.name, Math.random()]);

现场演示： http://jsfiddle.net/BlackLabel/w5patLum/

API 参考： https://api.highcharts.com/highcharts/series.pie.data

Highchart 切片

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-16 12:49:02

Highchart 切片

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-16 12:49:02

解决方案1
1 已采纳 2020-07-16 12:49:02