Mixpanel圖表 - 如何顯示不完整星期的實線和虛線

默認情況下，mixpanel.com在圖表上顯示一條虛線，表示一個不完整的星期，而所有其他星期都是實線（參見上圖）。Mixpanel圖表 - 如何顯示不完整星期的實線和虛線

我打電話.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?

來源

2017-01-06 stealthysnacks

見工作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); 
}

來源

2017-05-20 00:47:54 weilandia

Mixpanel圖表 - 如何顯示不完整星期的實線和虛線

回答

相關問題