C3/d3 一段时间内每天的状态值条形图

Question

我知道我不应该问这样一个模糊的问题，但我很无助，因为我找不到任何答案。

我指的是这个网站：https://developers.facebook.com/status/dashboard/

并尝试在 c3 中绘制相同的图表（应用历史），但不确定如何进行：

Example of required bar chart style

谁能帮我找出这个图的名称（也许这会帮助我在 c3/d3 示例中搜索），或者如果有人已经知道任何示例，请在此处 post。

Answer 1

虽然这应该很容易，但我尝试解决问题时仍然存在一些挑战。我不是 C3 大师，发现文档有点稀疏（原文如此）。

剩余问题：

我想清除工具提示上的颜色，但找不到 tooltip.color 选项；
我希望 x 轴上的日期显示每个月的第一天，例如 1 月 1 日、2 月 1 日或类似日期。

var elementID = "#chart";
 var myData = {};

 myData.x = 'x';
 myData.xFormat = "%Y-%m-%d";
 myData.type = 'bar';
 myX = ['2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31','2018-02-01','2018-02-02','2018-02-03','2018-02-04','2018-02-05','2018-02-06','2018-02-07','2018-02-08','2018-02-09','2018-02-10','2018-02-11','2018-02-12','2018-02-13','2018-02-14','2018-02-15','2018-02-16','2018-02-17','2018-02-18','2018-02-19','2018-02-20','2018-02-21','2018-02-22','2018-02-23','2018-02-24','2018-02-25','2018-02-26','2018-02-27','2018-02-28','2018-03-01','2018-03-02','2018-03-03','2018-03-04','2018-03-05','2018-03-06','2018-03-07','2018-03-08','2018-03-09','2018-03-10','2018-03-11','2018-03-12','2018-03-13','2018-03-14','2018-03-15','2018-03-16','2018-03-17','2018-03-18','2018-03-19','2018-03-20','2018-03-21','2018-03-22','2018-03-23','2018-03-24','2018-03-25','2018-03-26','2018-03-27','2018-03-28','2018-03-29','2018-03-30','2018-03-31','2018-04-01','2018-04-02','2018-04-03','2018-04-04','2018-04-05','2018-04-06','2018-04-07','2018-04-08','2018-04-09','2018-04-10','2018-04-11','2018-04-12','2018-04-13','2018-04-14','2018-04-15','2018-04-16','2018-04-17','2018-04-18','2018-04-19','2018-04-20','2018-04-21','2018-04-22','2018-04-23','2018-04-24','2018-04-25','2018-04-26','2018-04-27','2018-04-28','2018-04-29','2018-04-30','2018-05-01','2018-05-02','2018-05-03','2018-05-04','2018-05-05','2018-05-06','2018-05-07','2018-05-08','2018-05-09','2018-05-10','2018-05-11','2018-05-12','2018-05-13','2018-05-14','2018-05-15','2018-05-16','2018-05-17','2018-05-18','2018-05-19','2018-05-20','2018-05-21','2018-05-22','2018-05-23','2018-05-24','2018-05-25','2018-05-26','2018-05-27','2018-05-28','2018-05-29','2018-05-30','2018-05-31','2018-06-01'
];
 myY = [5,5,5,5,5,5,6,5,5,5,6,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5];
 myX.splice(0, 0, 'x');
 myY.splice(0, 0, 'Health status');
 myData.columns = [];
 myData.columns.push(myX);
 myData.columns.push(myY);
  myData.color = function(color, d) {
                    return d.value == 5 ? '#53B5B5' : '#CD249A';
                  }
 var chart = c3.generate({
   bindto: elementID,
    padding: {
        left: 30
    },    
   data: myData,
   size: {
     height: 80,
     width: 1200,
   },
    legend: {
      show: false // hide the x-axis legend
    },    
   axis: {
     x: {
       type: 'timeseries',
        tick: {
                format: "%b-%d"
            }
     },
      y: {
        show: false  // hide the y-axis line & ticks
      }
   },
    
    tooltip: {
           color: function(x){
            console.log(x)
            return 'transparent';                          
          },         
        format: {

          name: function(x) {
              return  '';  // blank out the name on the tooltip
              },
          value: function(x) {
              return x == 5 ? 'Good' : 'Bad';
              },
         
        },
    },    
 })

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>


<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>

C3/d3 一段时间内每天的状态值条形图

C3/ d3 bar chart of status value per day over a period of days

javascript

charts

d3.js

c3.js