我们如何使用Highcharts显示每日访问量？

Question

我正在进行高级图表日常访问并安装图表。见图像

我写的代码也在jsfiddle上。

$(function () {
$('#campaign-container').highcharts({
    chart: {
        type: 'areaspline',
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day:"%b %e, %Y",
        },
        tickInterval: 2,
        allowDecimals: false,
        labels: {
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    yAxis: {
        min: 0,
        max: 3000,
        tickInterval: 1000,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        shared: true
   },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        x: 0,
        y: 0
    },
    plotOptions: {
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                radius: 5
            }
        }
    },
    series: [{
        name: 'Visits',
        color: '#d3d3d3',
        data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }, {
        name: 'Installs',
        color: '#e77378',
        data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }]
    });
});

我希望输出如上图所示，在plotOptions上有一个click事件，带有圆形标记和十字线，如图所示。

我已经尝试了我的最佳水平以达到相同的结果输出但未能做到。建议我，我做错了。

Answer 1

您可以通过将allowPointSelect设置为true并定义状态（选择）来实现标记。下一步是捕获选择事件并使用renderer添加自定义路径。

plotOptions: {
  series: {
    point: {
      events: {
        select: function() {
          var p = this,
            chart = p.series.chart,
            r = chart.renderer,
            yAxis = chart.yAxis[0],
            y0 = yAxis.toPixels(yAxis.min);
          console.log(path);
          if (path) {
            path.destroy();
          }
          path = r.path(['M', p.plotX + chart.plotLeft, p.plotY + chart.plotTop, 'L', p.plotX + chart.plotLeft, y0])
            .attr({
              'stroke-width': 2,
              'stroke': 'red'
            })
            .add();

        }
      }
    },
    allowPointSelect: true,
    lineWidth: null,
    marker: {
      symbol: 'circle',
      fillColor: 'rgba(255,255,255,0)',
      //enabled: false,
      radius: 5,
      states: {
        hover: {
          enabled: false
        },
        select: {
          fillColor: 'white',
          radius: 4,
          lineWidth: 3,
          lineColor: 'red'
        }
      }
    }
  }
},

示例：http://jsfiddle.net/6sLhckba/