about dojox Charting X-axis labels

86 views Asked by At

My x-axis data is the last 24 hours and I want to label the hour. For the hour value with "0" I want to display it with bigger font-size and label it with Date. Is there any way to set the label style of the x-axis? My code is as blow:

<!DOCTYPE html>
<html >
<head>


    <link rel="stylesheet"  href="http://localhost/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css">

    <script>var dojoConfig = {
        parseOnLoad:true,
        packages: [{
            "name": "myModules",
            "location": location.pathname.replace(/\/[^/]+$/, "") + "/"
        }]
    };
    </script>
    <script src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1" charset="utf-8"></script>
    <script>
        require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojo/ready"],
                function(Chart, Default, Lines, ready){
                    ready(function(){
                        var chart1 = new Chart("simplechart", {
                            title: "压力",
                            titlePos: "top"});
                        chart1.addPlot("default", {type: Lines, labels: true,labelStyle: "outside", labelOffset: 25,Stroke:{color: "blue", width: 1},markers: true});
                        chart1.addAxis("x",{ majorLabels: true, majorTicks: true,
                            minorLabels: true, minorTicks:true, minorTick:{length:1},
                            microTicks: true,
                            majorTickStep:12,
                            minorTickStep:1,

                            labels: [{value: 1, text: "10"}, {value: 2, text: "11",length:"20"},
                                {value: 3, text: "12"}, {value: 4, text: "0"},
                                {value: 5, text: "May"}, {value: 6, text: "Jun"},
                                {value: 7, text: "Jul"}, {value: 8, text: "Aug"},
                                {value: 9, text: "Sep"}, {value: 10, text: "Oct"},
                                {value: 11, text: "Nov"}, {value: 12, text: "Dec"}]
                        });

                        chart1.addAxis("y", {vertical: true,microTickStep:1});
                        chart1.addSeries("Series 1", [{x: 1, y: 5}, {x: 2, y: 1.7},
                            {x: 3, y: 9}, {x: 4, y: 3}],{plot: "default", stroke: {color:"blue"}});
                        chart1.render();
                    });
                });
    </script>
</head>
<body class="claro">
<div id="simplechart" style="width: 250px; height: 150px; margin: 5px auto 0px auto;"></div>
</body>
</html>
1

There are 1 answers

0
Illia On

You can change axes styles using Themes. If you want different theme for different axis use type property of axis.

this.addAxis("y", {type: "Wetland",
                  vertical: true,
                  } 
             );

Where Wetland is name of the theme in dojo/dojox/charting/themes There are a lot of themes there. But if none of them satisfy you, you can create your own theme by modifying some of defaults.

You cannot set specific style only on one of the axis labels. I.e all labels of your axis have the same style.