Mixpanel图表 - 如何显示不完整周的实线和虚线

Question

默认情况下，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?

Answer 1

请在此处查看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);
}