在HTML畫布圖表中更改x標籤

嗨，我正在使用HTML畫布圖表。在其中一個圖表中，我可以更改x軸的標籤嗎？在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>

現在，這裏我們可以看出，x值是10,20,30 ......我的問題是，我們才能將其更改爲其他格式，與上午10點或下午10點？

來源

2017-07-03 Akki

您可以添加後綴（或前綴）於x軸與chart.options.axisX

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

或者你可以同時添加這樣的：

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

來源

2017-07-03 21:20:58

謝謝你的回答。此外，如果您可以告訴我如何將整個x軸更改爲從上午12點至晚上11點顯示的小時格式。那太好了。 – Akki

如果後綴解決方案正常工作，請接受答案，併發布與am/pm規範不同的問題（這樣，任何人都可以幫助您，而不僅僅是我）。當然，我會盡力幫助你。 –

在HTML畫布圖表中更改x標籤

回答

相關問題