は、h軸のテキストの一部のみを表示します。

Question

私はangularjs google chartで作業しています。 デモを見つけてくださいhere

h軸とツールチップに異なる値を表示します。 以下のコードでは、h軸に月の名前だけを表示し、ツールチップには月と年の両方を表示します。 アドバイスはありますか？

JSコード：私はv: "January" + " 2017"を使用している上記のコードで

angular.module('myApp', ['googlechart']) 
    .controller('myController', function($scope) { 
    var chart1 = {}; 
    chart1.type = "ColumnChart"; 
    chart1.displayed = false; 
    chart1.data = { 
     "cols": [{ 
     id: "month", 
     label: "Month", 
     type: "string" 
     }, { 
     id: "laptop-id", 
     label: "Laptop", 
     type: "number" 
     } ], 
     "rows": [{ 
     c: [{ 
      v: "January" + " 2017" 
     }, { 
      v: 19, 

     } ] 
     }, { 
     c: [{ 
      v: "February" + " 2017" 
     }, { 
      v: 13 
     }] 
     }, { 
     c: [{ 
      v: "March" + " 2017" 
      }, { 
      v: 24 
      } 

     ] 
     }, { 
     c: [{ 
      v: "April" + " 2017" 
      }, { 
      v: 24 
      } 
     ] 
     }, { 
     c: [{ 
      v: "May"+ " 2017" 
      }, { 
      v: 18 
      } 
     ] 
     }, { 
     c: [{ 
      v: "June"+ " 2017" 
      }, { 
      v: 21 
      } 
     ] 
     }, { 
     c: [{ 
      v: "July"+ " 2017" 
      }, { 
      v: 24 
      } 

     ] 
     }, { 
     c: [{ 
      v: "August"+ " 2017" 
      }, { 
      v: 14 
      } 
     ] 
     }, { 
     c: [{ 
      v: "September"+ " 2017" 
      }, { 
      v: 4 
      } 
     ] 
     }, { 
     c: [{ 
      v: "October"+ " 2017" 
      }, { 
      v: 34 
      } 
     ] 
     }] 
    }; 
    chart1.options = { 
     "title": "Title goes here", 
     "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
     "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
     "isStacked": "true", 
     "fill": 20, 
     focusTarget: 'category', 
     "displayExactValues": true, 
     "vAxis": { 
     "title": "Sales unit", 
     "gridlines": { 
      "count": 10 
     } 
     }, 
     "hAxis": { 
     slantedText : "true", 
    }, 

    }; 
    $scope.myChart = chart1; 

    }); 

、私は最初の部分、すなわちだけを表示したい、1月は時間軸とに表示される2017年1月にツールチップは、バー上にマウスを置いたとき（同じことが2月、3月、H軸上、ツールチップ上には個々のバーの完全なテキストが表示されます）。

Answer 1

あなたは、これが軸ラベルのhAxis.formatとhAxis.ticks

が作業スニペット以下を参照してくださいできるようになります列の値として

を実際の日付を使用することができます...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable({ 
 
    "cols": [{ 
 
    id: "month", 
 
    label: "Month", 
 
    type: "date" 
 
    }, { 
 
    id: "laptop-id", 
 
    label: "Laptop", 
 
    type: "number" 
 
    } ], 
 
    "rows": [{ 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 0, 1), 
 
    f: "January 2017" 
 
    }, 
 
    {v: 119} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 1, 1), 
 
    f: "February 2017" 
 
    }, 
 
    {v: 022} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 2, 1), 
 
    f: "March 2017" 
 
    }, 
 
    {v: 033} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 3, 1), 
 
    f: "April 2017" 
 
    }, 
 
    {v: 044} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 4, 1), 
 
    f: "May 2017" 
 
    }, 
 
    {v: 055} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 5, 1), 
 
    f: "June 2017" 
 
    }, 
 
    {v: 066} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 6, 1), 
 
    f: "July 2017" 
 
    }, 
 
    {v: 077} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 7, 1), 
 
    f: "August 2017" 
 
    }, 
 
    {v: 088} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 8, 1), 
 
    f: "September 2017" 
 
    }, 
 
    {v: 099} 
 
    ] 
 
    }, { 
 
    c: [ 
 
    { 
 
    v: new Date(2017, 9, 1), 
 
    f: "October 2017" 
 
    }, 
 
    {v: 010} 
 
    ] 
 
    }] 
 
    }); 
 

 
    options = { 
 
    "title": "Title goes here", 
 
    "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
 
    "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
 
    "isStacked": "true", 
 
    "fill": 20, 
 
    focusTarget: 'category', 
 
    "displayExactValues": true, 
 
    "vAxis": { 
 
     "title": "Sales unit", 
 
     "gridlines": { 
 
     "count": 10 
 
     } 
 
    }, 
 
    "hAxis": { 
 
     slantedText : "true", 
 
     format: "MMM" 
 
    } 
 
    }; 
 

 
    options.hAxis.ticks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    options.hAxis.ticks.push(data.getValue(i, 0)); 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>