Гистограмма C3 / d3 значения статуса за день в течение нескольких дней - PullRequest
Новая
       45

Гистограмма C3 / d3 значения статуса за день в течение нескольких дней

0 голосов
/ 23 октября 2018

Я знаю, что не должен задавать такой расплывчатый вопрос, но я просто беспомощен, поскольку нигде не могу найти ответ на этот вопрос.

Я имею в виду этот сайт: https://developers.facebook.com/status/dashboard/

и пытается построить тот же график (История приложения) в c3, но не уверен, как действовать:

Пример требуемого стиля гистограммы

Может кто-нибудь, пожалуйста, помогитечтобы я узнал название этого графика (возможно, это поможет мне искать в примерах c3 / d3) или, если кто-то уже знал о каком-либо примере, пожалуйста, напишите здесь.

1 Ответ

0 голосов
/ 23 октября 2018

Хотя это должно быть легко, все же есть некоторые проблемы с моей попыткой найти решение.Я не гуру C3 и нахожу документы немного редкими (sic).

Осталось проблем:

  1. Я хотел очистить цвет в подсказке, но не смог найти подсказку.опция цвета;
  2. Я хотел, чтобы даты на оси х отображались для каждого первого дня месяца, поэтому январь-1, февраль-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>
...