2017-01-06 11 views
1

mixpanel.com client По умолчанию mixpanel.com показывает пунктирную линию на графике, который представляет неполную неделю, в то время как все остальные недели являются сплошной линией (см. Выше рис.).Таблицы с микспанелями - как показать сплошную и пунктирную линию для неполной недели

Я звоню .MPChart(), чтобы создать график, но он показывает только сплошные линии. Я бы хотел увидеть пунктирную линию в конце. Я просмотрел https://mixpanel.com/help/platform#ui/chart и http://api.highcharts.com/highcharts, но я не могу найти способ сделать это.

Вот код,

шаблона:

<div ref="chart123" id="chart123"></div> 

JS:

// using ReactJS refs 
    chart123 = $(this.refs.chart123).MPChart({ 
     chartType: 'line', 
     highchartsOptions: { 
      tooltip: { 
       formatter: function() { 
        return self.formatTooltip(this) 
       } 
      } 
     } 
    }); 

    chart123.MPChart('setData', this.state.data); 

Вот тот же самый вопрос, но они используют Chart.js: Can we draw a Line Chart with both solid and dotted line in it?

ответ

0

в разделе Работа JSFiddle здесь: http://jsfiddle.net/weilandia/ykpnoeLf/.

Приведенный выше пример также делает грубую фальсификацию всплывающей подсказки Mixpanel.

Что касается пунктирной линии для неполных интервалов времени, я использую следующие функции для обновления объекта (ов) серии перед инициализацией с Highcharts:

function specifyIncompleteZones(series, intervalType) { 
    if (series.data.length > 0) { 
    var lastDataPoint = series.data[series.data.length - 1]; 
    var penultimateDataPoint = series.data[series.data.length - 2]; 
    if (seriesIsIncomplete(lastDataPoint[0], intervalType)) { 
     series.zoneAxis = 'x'; 
     series.zones = [ 
     { value: penultimateDataPoint[0] }, 
     { dashStyle: 'dash' } 
     ]; 
    } 
    } 
} 

function seriesIsIncomplete(pointValue, intervalType) { 
    var startDate = moment(pointValue).utc(); 
    var endDate = startDate.endOf(intervalType).toDate(); 

    return moment().isBefore(endDate); 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^