如何在 Zingchart 条形图中的下一行显示大 X 轴标签？

Question

我有下面的条形图 json：

    {
"graphset":[
    {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
        "scale-x":{
            "values":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
            "short":true,
            "auto-fit":true,
            "items-overlap":true,
            "bold":true,
            "label":{
                "text":"Category",
                "font-size":"14px"
            }
        },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }
]
}

而条形图的截图是：

如图所示，x 轴标签相互重叠。我希望每个标签都清晰明了。如果名字很大，可以移到下一行吗？我已经固定 space 分配，所以我不能增加每个条之间的宽度，我也不想使用 max-chars 属性，因为我想显示全名。另外，我将无法使用 font-angle 将名称设置为另一个角度——我只希望它们处于这个角度。

感谢任何帮助。

Answer 1

适当的方法

最好的方法是使用 max-chars 的缩写或显示截断的 values 然后在那些显示整个值的标签上显示 tooltip。
使用有角度的文本也是非常合理的。

Other solution

最好应用规则并每隔 scaleX.item 以不同的行高显示。你可以用规则来做到这一点

"scale-x":{
  "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
  "items-overlap":true,
  "bold":true,
  "label":{
      "text":"Category",
      "font-size":"14px",
      offsetY: 5
  },
  item: {
    rules: [
      {
        rule: '%i%2 == 1',
        offsetY:13
      }  
    ]
  }
}

var myConfig = {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
"scale-x":{
      "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
      "items-overlap":true,
      "bold":true,
      "label":{
          "text":"Category",
          "font-size":"14px",
          offsetY: 5
      },
      item: {
        rules: [
          {
            rule: '%i%2 == 1',
            offsetY:13
          }  
        ]
      }
  },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }


zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: 400, 
 width: 450 
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>

如何在 Zingchart 条形图中的下一行显示大 X 轴标签？

How to display big X axis labels in next line in Zingchart bar graph?

charts

bar-chart

zingchart

适当的方法

Other solution