Question

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

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

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

Example of required bar chart style

任何人都可以帮助我找出该图的名称（也许可以帮助我在c3 / d3示例中进行搜索），或者如果有人已经知道任何示例，请在此处发布。

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状态值的条形图

1 个答案: