2017-07-03 10 views
0

こんにちは、私はHTMLキャンバスチャートを使用しています。グラフの1つでは、x軸のラベルを変更できますか?HTMLキャンバスチャートのxラベルを変更する

チャートのソースコードがされています。今ここに私たちはそのx値を見ることができる10,20,30である

<!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> 

...私の質問は、私たちは、午前10時のような他の形式に変更することができていますか午後10時?

答えて

0

あなたはchart.options.axisX

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

それとも、このように両方を追加することができて、x軸に接尾(または接頭)を追加することができます。

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

をいただき、ありがとうございます回答。また、x軸全体を午前12時から午後11時まで表示する時間形式に変更する方法を教えてください。それは素晴らしいだろう。 – Akki

+0

接尾辞の解決策が働いている場合は、答えを受け入れて、am/pmの仕様で別の質問を投稿してください(私だけでなく誰でもあなたを助けることができます)。もちろん私はあなたを助けようとします。 –

関連する問題