Javascript 更改HTML画布图表中的x标签_Javascript_Charts_Html5 Canvas

Javascript 更改HTML画布图表中的x标签

javascript charts html5-canvas

Javascript 更改HTML画布图表中的x标签,javascript,charts,html5-canvas,Javascript,Charts,Html5 Canvas,嗨，我正在使用HTML画布图表。在其中一个图表中，我可以更改x轴的标签吗图表的源代码是： <!DOCTYPE HTML> <html> <head> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> <script type="text/javascript" src="https:

嗨，我正在使用HTML画布图表。在其中一个图表中，我可以更改x轴的标签吗

图表的源代码是：

<!DOCTYPE HTML>
<html>

<head>


</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function () {
        var chart = new CanvasJS.Chart("chartContainer",
            {
                animationEnabled: true,
                theme: "theme2",
                title:{
                    text: "Multi Series Spline Chart - Hide / Unhide via Legend"
                },
                axisY:[{
                    lineColor: "#4F81BC",
                    tickColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    titleFontColor: "#4F81BC",
                    lineThickness: 2,
                },
                    {
                        lineColor: "#C0504E",
                        tickColor: "#C0504E",
                        labelFontColor: "#C0504E",
                        titleFontColor: "#C0504E",
                        lineThickness: 2,

                    }],
                data: [
                    {
                        type: "spline", //change type to bar, line, area, pie, etc
                        showInLegend: true,
                        dataPoints: [
                            { x: 10, y: 51 },
                            { x: 20, y: 45},
                            { x: 30, y: 50 },
                            { x: 40, y: 62 },
                            { x: 50, y: 95 },
                            { x: 60, y: 66 },
                            { x: 70, y: 24 },
                            { x: 80, y: 32 },
                            { x: 90, y: 16}
                        ]
                    },
                    {
                        type: "spline",
                        axisYIndex: 1,
                        showInLegend: true,
                        dataPoints: [
                            { x: 10, y: 201 },
                            { x: 20, y: 404},
                            { x: 30, y: 305 },
                            { x: 40, y: 405 },
                            { x: 50, y: 905 },
                            { x: 60, y: 508 },
                            { x: 70, y: 108 },
                            { x: 80, y: 300 },
                            { x: 90, y: 101}
                        ]
                    }
                ],
                legend: {
                    cursor: "pointer",
                    itemclick: function (e) {
                        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                            e.dataSeries.visible = false;
                        } else {
                            e.dataSeries.visible = true;
                        }
                        chart.render();
                    }
                }
            });

        chart.render();
    });
</script>
</body>

</html>


document.addEventListener（“DOMContentLoaded”，函数（）{
var chart=new CanvasJS.chart（“chartContainer”，
{
animationEnabled：没错，
主题：“主题2”，
标题：{
文本：“多系列样条曲线图-通过图例隐藏/取消隐藏”
},
axisY：[{
线条颜色：“4F81BC”，
勾选颜色：“4F81BC”，
labelFontColor:#4F81BC“，
标题字体颜色：“4F81BC”，
线宽：2，
},
{
线条颜色：“C0504E”，
勾选颜色：“C0504E”，
labelFontColor:#C0504E“，
标题字体颜色：“C0504E”，
线宽：2，
}],
数据：[
{
类型：“样条线”，//将类型更改为条形、直线、面积、饼图等
showInLegend：是的，
数据点：[
{x:10，y:51}，
{x:20，y:45}，
{x:30，y:50}，
{x:40，y:62}，
{x:50，y:95}，
{x:60，y:66}，
{x:70，y:24}，
{x:80，y:32}，
{x:90，y:16}
]
},
{
类型：“样条曲线”，
axisYIndex:1，
showInLegend：是的，
数据点：[
{x:10，y:201}，
{x:20，y:404}，
{x:30，y:305}，
{x:40，y:405}，
{x:50，y:905}，
{x:60，y:508}，
{x:70，y:108}，
{x:80，y:300}，
{x:90，y:101}
]
}
],
图例：{
光标：“指针”，
项目点击：功能（e）{
if（typeof（e.dataSeries.visible）==“undefined”| | e.dataSeries.visible）{
e、 dataSeries.visible=false；
}否则{
e、 dataSeries.visible=true；
}
chart.render（）；
}
}
});
chart.render（）；
});

现在我们可以看到x值是10,20,30。。。我的问题是，我们可以将它们更改为其他格式，如上午10点或晚上10点吗？

您可以使用

图表选项向x轴添加后缀（或前缀）。axisX

chart.options.axisX = { suffix: "AM" };
或者，您可以这样添加这两个选项：

chart.options.axisX = { prefix: "/", suffix: "AM" };

谢谢你的回答。另外，如果您能告诉我如何将整个x轴更改为从上午12点到晚上11点显示的小时格式。那太好了。如果后缀解决方案有效，请接受答案，并发布一个带有am/pm规范的不同问题（这样，任何人都可以帮助你，而不仅仅是我）。我当然会尽力帮助你。