如何在 ZingChart 中为 x 和 y 轴添加标题

Question

我想使用 ZingChart 在 x 轴和 y 轴上添加标题。例如，如果我的 x 轴显示年份（2010、2011、2012 等），我希望标题"会计年度"显示在每个年份标签下方

同样，如果我在 y 轴上衡量收入，我可能会看到 1，000，000、2，000，000 等标签。我想在 y 轴上添加一个标题，上面写着"年收入"。

我在文档中找不到有关此内容的任何内容。

Answer 1

Martin 使用的链接是正确的，但是在 JSON 语法指南中也有关于此的文档。 http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/

var myChart = {
"graphset":[
    {
        "type":"mixed",
        "background-color":"#ffffff",
        "alpha":1,
        "title":{
            "text":"Browser Usage",
            "font-size":"20px",
            "font-weight":"bold",
            "font-color":"#000000",
            "background-color":"#ffffff",
            "margin-top":"15px",
            "margin-left":"15px",
            "margin-bottom":"10px",
            "text-align":"left"
        },
        "scale-x":{
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "values":["Jan","Feb","Mar","Apr","May","Jun","Jul"],
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            },
      "label":{
        "text":"Month",
        "font-size":"20px",
        "color":"red"
      },  
            "item":{
                "font-family":"helvetica",
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            }
        },
        "scale-y":{
            "values":"0:50:10",
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "tick":{
                "visible":true,
                "line-color":"#CCCCCC",
                "placement":"outer",
                "size":"12px"
            },
            "item":{
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            },
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            }
        },
        "tooltip":{
            "visible":true
        },
        "plot":{
            "alpha":1,
            "hover-state":{
                "visible":false
            }
        },
        "series":[
            {
                "type":"bar",
                "values":[47,32,37,48,28,27,32],
                "text":"Safari",
                "background-color":"#7eac10"
            }
        ]
    }
]
};
zingchart.render({
  id: "myChart",
  height: "300px",
  width: "100%",
  data: myChart
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

您可能一直在文档中搜索标题。但是，您可以通过向 scale-x 和 scale-y 对象添加"标签"对象并用必要的属性填充它以设置其样式以匹配您的图表来完成您想要执行的操作。

您可以随时右键单击ZingChart上的图表以查看源。