2017-04-06 14 views
0

お手伝いできますか?このヒートマップチャートを作成しました。x軸に「7」の数字が表示されます。たぶん、私は疲れている..しかし、何が問題なのですか? (私はこれの前に似ていなかった)ハイチャートx軸のカテゴリ

多くのありがとう!

$(document).ready(function() { 
 
    var chart = {  
 
     type: 'heatmap', 
 
     marginTop: 40, 
 
     marginBottom: 80 
 
    }; 
 
    var title = { 
 
     text: 'Sales per employee per weekday' 
 
    };  
 

 
    var xAxis = { 
 
     categories: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
 
    }; 
 
    
 
    var yAxis = { 
 
     categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'], 
 
     title: null 
 
    }; 
 
    
 
    var colorAxis = { 
 
     min: 0, 
 
     minColor: '#FFFFFF', 
 
     maxColor: Highcharts.getOptions().colors[0] 
 
    }; 
 

 
    var legend = { 
 
     align: 'right', 
 
     layout: 'vertical', 
 
     margin: 0, 
 
     verticalAlign: 'top', 
 
     y: 25, 
 
     symbolHeight: 280 
 
    }; 
 

 
    var tooltip = { 
 
     formatter: function() { 
 
     return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + 
 
     this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; 
 
     } 
 
    }; 
 

 
    var series= [{ 
 
     name: 'Sales per employee', 
 
     borderWidth: 1, 
 
     data: [[1,0,1],[1,1,1],[1,2,1],[1,3,1],[1,4,1],[1,5,1],[1,6,1],[1,7,1],[1,8,1],[1,9,1],[1,10,1],[1,11,1],[1,12,1],[1,13,1],[1,14,1],[1,15,1],[1,16,1],[1,17,1],[1,18,1],[1,19,1],[1,20,1],[1,21,1],[1,22,1],[2,0,1],[2,1,1],[2,2,1],[2,3,1],[2,4,1],[2,5,1],[2,6,1],[2,7,1],[2,8,1],[2,9,1],[2,10,1],[2,11,1],[2,12,1],[2,13,1],[2,14,1],[2,15,1],[2,16,1],[2,17,11],[2,18,1],[2,19,1],[2,20,1],[2,21,1],[2,22,1],[3,0,1],[3,1,1],[3,2,1],[3,3,1],[3,4,1],[3,5,1],[3,6,1],[3,7,1],[3,8,1],[3,9,1],[3,10,1],[3,11,1],[3,12,1],[3,13,1],[3,14,1],[3,15,1],[3,16,1],[3,17,1],[3,18,1],[3,19,1],[3,20,1],[3,21,1],[3,22,1],[4,0,1],[4,1,1],[4,2,1],[4,3,1],[4,4,1],[4,5,1],[4,6,1],[4,7,1],[4,8,1],[4,9,1],[4,10,21],[4,11,1],[4,12,15],[4,13,1],[4,14,1],[4,15,1],[4,16,1],[4,17,1],[4,18,1],[4,19,1],[4,20,1],[4,21,1],[4,22,1],[5,0,1],[5,1,1],[5,2,1],[5,3,1],[5,4,1],[5,5,1],[5,6,1],[5,7,1],[5,8,1],[5,9,1],[5,10,31],[5,11,1],[5,12,1],[5,13,1],[5,14,1],[5,15,1],[5,16,1],[5,17,1],[5,18,1],[5,19,1],[5,20,1],[5,21,1],[5,22,1],[6,0,1],[6,1,1],[6,2,1],[6,3,1],[6,4,1],[6,5,1],[6,6,1],[6,7,1],[6,8,1],[6,9,1],[6,10,1],[6,11,1],[6,12,1],[6,13,1],[6,14,1],[6,15,1],[6,16,1],[6,17,1],[6,18,1],[6,19,1],[6,20,1],[6,21,1],[6,22,1],[7,0,1],[7,1,1],[7,2,1],[7,3,1],[7,4,1],[7,5,1],[7,6,1],[7,7,1],[7,8,1],[7,9,1],[7,10,1],[7,11,1],[7,12,1],[7,13,1],[7,14,1],[7,15,1],[7,16,1],[7,17,1],[7,18,1],[7,19,1],[7,20,1],[7,21,1],[7,22,1]], 
 
     dataLabels: { 
 
     enabled: true, 
 
     color: '#000000' 
 
     } 
 
    }];  
 
     
 
    var json = {}; 
 
    json.chart = chart; 
 
    json.title = title;  
 
    json.xAxis = xAxis; 
 
    json.yAxis = yAxis; 
 
    json.colorAxis = colorAxis; 
 
    json.legend = legend; 
 
    json.tooltip = tooltip; 
 
    json.series = series;  
 
    
 
    $('#container').highcharts(json); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://code.highcharts.com/highcharts.js"></script>  
 
    <script src="https://code.highcharts.com/highcharts-more.js"></script>  
 
    <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
 
<div id="container" style="width: 550px; height: 500px; margin: 0 auto"></div>

あなたは私を助けてもらえますか?私はこのヒートマップチャートを作成しました。そして、私はx軸に "7"の数字をドロップしています。たぶん、私は疲れている..しかし、何が問題なのですか? (私はこれの前に似ていなかった)

多くのありがとう!

答えて

0

申し訳ありませんが、私はX軸で1〜7の範囲を使用していました。 0からではありません。このポストを申し訳ありません。解決済み。

0

から0-6までです。

ヒートマップシリーズは、タイプをheatmapに設定することで定義されます。ヒートマップはcartesianシリーズのようなXY軸を持っています。ただし、ポイント定義には、x,yvalueの3つの値があります。

$(document).ready(function() { 
 
    var chart = {  
 
     type: 'heatmap', 
 
     marginTop: 40, 
 
     marginBottom: 80 
 
    }; 
 
    var title = { 
 
     text: 'Sales per employee per weekday' 
 
    };  
 

 
    var xAxis = { 
 
     categories: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
 
    }; 
 
    
 
    var yAxis = { 
 
     categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'], 
 
     title: null 
 
    }; 
 
    
 
    var colorAxis = { 
 
     min: 0, 
 
     minColor: '#FFFFFF', 
 
     maxColor: Highcharts.getOptions().colors[0] 
 
    }; 
 

 
    var legend = { 
 
     align: 'right', 
 
     layout: 'vertical', 
 
     margin: 0, 
 
     verticalAlign: 'top', 
 
     y: 25, 
 
     symbolHeight: 280 
 
    }; 
 

 
    var tooltip = { 
 
     formatter: function() { 
 
     return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + 
 
     this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; 
 
     } 
 
    }; 
 

 
    var series= [{ 
 
     name: 'Sales per employee', 
 
     borderWidth: 1, 
 
     data: [[0,0,1],[0,1,1],[0,2,1],[0,3,1],[0,4,1],[0,5,1],[0,6,1],[0,7,1],[0,8,1],[0,9,1],[0,10,1],[0,11,1],[0,12,1],[0,13,1],[0,14,1],[0,15,1],[0,16,1],[0,17,1],[0,18,1],[0,19,1],[0,20,1],[0,21,1],[0,22,1],[1,0,1],[1,1,1],[1,2,1],[1,3,1],[1,4,1],[1,5,1],[1,6,1],[1,7,1],[1,8,1],[1,9,1],[1,10,1],[1,11,1],[1,12,1],[1,13,1],[1,14,1],[1,15,1],[1,16,1],[1,17,1],[1,18,1],[1,19,1],[1,20,1],[1,21,1],[1,22,1],[2,0,1],[2,1,1],[2,2,1],[2,3,1],[2,4,1],[2,5,1],[2,6,1],[2,7,1],[2,8,1],[2,9,1],[2,10,1],[2,11,1],[2,12,1],[2,13,1],[2,14,1],[2,15,1],[2,16,1],[2,17,11],[2,18,1],[2,19,1],[2,20,1],[2,21,1],[2,22,1],[3,0,1],[3,1,1],[3,2,1],[3,3,1],[3,4,1],[3,5,1],[3,6,1],[3,7,1],[3,8,1],[3,9,1],[3,10,1],[3,11,1],[3,12,1],[3,13,1],[3,14,1],[3,15,1],[3,16,1],[3,17,1],[3,18,1],[3,19,1],[3,20,1],[3,21,1],[3,22,1],[4,0,1],[4,1,1],[4,2,1],[4,3,1],[4,4,1],[4,5,1],[4,6,1],[4,7,1],[4,8,1],[4,9,1],[4,10,21],[4,11,1],[4,12,15],[4,13,1],[4,14,1],[4,15,1],[4,16,1],[4,17,1],[4,18,1],[4,19,1],[4,20,1],[4,21,1],[4,22,1],[5,0,1],[5,1,1],[5,2,1],[5,3,1],[5,4,1],[5,5,1],[5,6,1],[5,7,1],[5,8,1],[5,9,1],[5,10,31],[5,11,1],[5,12,1],[5,13,1],[5,14,1],[5,15,1],[5,16,1],[5,17,1],[5,18,1],[5,19,1],[5,20,1],[5,21,1],[5,22,1],[6,0,1],[6,1,1],[6,2,1],[6,3,1],[6,4,1],[6,5,1],[6,6,1],[6,7,1],[6,8,1],[6,9,1],[6,10,1],[6,11,1],[6,12,1],[6,13,1],[6,14,1],[6,15,1],[6,16,1],[6,17,1],[6,18,1],[6,19,1],[6,20,1],[6,21,1],[6,22,1]], 
 
     dataLabels: { 
 
     enabled: true, 
 
     color: '#000000' 
 
     } 
 
    }];  
 
     
 
    var json = {}; 
 
    json.chart = chart; 
 
    json.title = title;  
 
    json.xAxis = xAxis; 
 
    json.yAxis = yAxis; 
 
    json.colorAxis = colorAxis; 
 
    json.legend = legend; 
 
    json.tooltip = tooltip; 
 
    json.series = series;  
 
    
 
    $('#container').highcharts(json); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://code.highcharts.com/highcharts.js"></script>  
 
    <script src="https://code.highcharts.com/highcharts-more.js"></script>  
 
    <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
 
<div id="container" style="width: 550px; height: 500px; margin: 0 auto"></div>

関連する問題