微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在提供的颜色列表中绘制每个 Amcharts4 Radial bar chart series1

如何解决如何在提供的颜色列表中绘制每个 Amcharts4 Radial bar chart series1

无法通过提供的颜色列表绘制每个 series1 行。我需要每条线都涂上不同的颜色。 尝试了不同的方法都卡住了。

<!-- Resources -->
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <div id="chartdiv"></div>


/*CSS*/
    body {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }
    
    #chartdiv {
      width: 100%;
      height: 650px;
    }


//Chart code
    am4core.ready(function() {
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    var chart = am4core.create("chartdiv",am4charts.RadarChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
    
      
      chart.colors.list = [
      am4core.color("#000"),am4core.color("#D65DB1"),am4core.color("#FF6F91"),am4core.color("#FF9671"),am4core.color("#FFC75F"),];
      
    chart.data = [
      {
        category: "ENE",value1: 6.1,},{
        category: "FEB",value1: 3,{
        category: "MAR",value1: 5.4,{
        category: "ABR",value1: 4.5,{
        category: "MAY",value1: 2.1,{
        category: "JUN",value1: 6.5,{
        category: "JUL",{
        category: "AGO",value1: 3.6,{
        category: "SEP",value1: 3.3,{
        category: "OCT",value1: 1.1,{
        category: "NOV",lineColor: chart.colors.next(),{
        category: "DIC",value1: 4,{
        category: "ENE2",value1: 3.1,{
        category: "FEB2",{
        category: "MAR2",value1: 5.1,}
    ];
    
    //chart.padding(20,20,20);
    
    
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.datafields.category = "category";
    categoryAxis.renderer.labels.template.location = 0.5;
    categoryAxis.renderer.labels.template.horizontalCenter = "right";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.tooltipLocation = 0.5;
    categoryAxis.renderer.grid.template.strokeOpacity = 0.07;
    categoryAxis.renderer.axisFills.template.disabled = true;
    categoryAxis.interactionsEnabled = false;
    categoryAxis.renderer.minGriddistance = 10;
    
    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.renderer.labels.template.horizontalCenter = "left";
    valueAxis.min = 0;
    valueAxis.max = 7.1;
    valueAxis.strictMinMax = true;
    valueAxis.renderer.maxLabelPosition = 0.99;
    valueAxis.renderer.minGriddistance = 100; 
    valueAxis.renderer.grid.template.strokeOpacity = 0.07;
    valueAxis.renderer.axisFills.template.disabled = true;
    valueAxis.interactionsEnabled = false;
    
    
    var series1 = chart.series.push(new am4charts.RadarColumnSeries());
    series1.columns.template.tooltipText = "{name}: {valueX.value}";
    series1.name = "Medición";
    series1.datafields.categoryY = "category";
    series1.datafields.valueX = "value1";
    //series1.stacked = false;
    series1.columns.template.propertyFields.fill = "lineColor";
    
    chart.seriesContainer.zIndex = -1;
    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarX.exportable = false;
    chart.scrollbarY = new am4core.Scrollbar();
    chart.scrollbarY.exportable = false;
    chart.cursor = new am4charts.RadarCursor();
    chart.cursor.lineY.disabled = true;
    
    }); 
    
    //end am4core.ready()

Codepen to try code

我无法在我自己的代码笔“径向条形图”中重现以下内容Working official solution "supposed"

我可以使用提供的官方示例来完成,但不能使用径向条形图“atm”。 任何帮助真的很感激。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。