Highcharts - 同步图表十字线和圆点显示

Question

我改变了官方图表，但十字线不是我预期的。

DEMO：Official synchronized-charts

我改变了什么：

• 添加xAxis.categories作为我的自定义xAxis标签
• 将series[0].fillOpacity 0.3更改为1
• 使用我的自定义json数据

代码：

```的JavaScript

//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {

var json = {
  xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
  datasets: [{
    name: "Num of dog",
    data: [1,2,3,4,5,1,2,3,4,5],
    unit: "dogs",
    type: "area",
    valueDecimals: 0
  },{
    name: "Num of cat",
    data: [1,2,3,4,5,1,2,3,4,5],
    unit: "cats",
    type: "area",
    valueDecimals: 0
  }]
};

//$.each(activity.datasets, function (i, dataset) {
$.each( json.datasets, function (i, dataset) {
    // Add X values
    dataset.data = Highcharts.map(dataset.data, function (val, j) {

        //return [activity.xData[j], val];
        return [json.xData[j], val];
    });

    $('<div class="chart">')
        .appendTo('#container')
        .highcharts({

            ...,

            xAxis: {
                crosshair: true,
                events: {
                    setExtremes: syncExtremes
                },
                categories: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
                //labels: {
                    //format: '{value} km'
                //}
            },

            ...,

            series: [{
                ...,
                fillOpacity: 1,
                //fillOpacity: 0.3,

...

});

```

DEMO：My synchronized-charts

我需要什么：

• 显示十字线，如官方同步图表
• 不要显示圆圈点，例如官方同步图表
• 显示圆点当鼠标悬停时，如官方同步图表
• Crosshair线放在前面

有谁知道要做到这一点？

谢谢！

Answer 1

不要显示圆点，就像官方同步图表一样。加入

   plotOptions: {
      series: {
        marker: {
          enabled: false
        }
        pointPlacement: 'on'
      }
    },

将Crosshair线放到前面。更新了xAxis

 xAxis: {
    categories: json.xData,
    tickmarkPlacement: 'on',
    crosshair: {
      width: 2,
      zIndex: 3
    },
    events: {
      setExtremes: syncExtremes
    },
  },

＆＃13;

＆＃13;

/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/



/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
$('#container').bind('mousemove touchmove touchstart', function(e) {
  var chart,
    point,
    i,
    event;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    point = chart.series[0].searchPoint(event, true); // Get the hovered point

    if (point) {
      point.highlight(e);
    }
  }
});
/**
 * Override the reset function, we don't need to hide the tooltips and crosshairs.
 */
Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function(event) {
  this.onMouseOver(); // Show the hover marker
  this.series.chart.tooltip.refresh(this); // Show the tooltip
  this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
  var thisChart = this.chart;

  if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
    Highcharts.each(Highcharts.charts, function(chart) {
      if (chart !== thisChart) {
        if (chart.xAxis[0].setExtremes) { // It is null while updating
          chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
            trigger: 'syncExtremes'
          });
        }
      }
    });
  }
}

// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
var json = {
  xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
  datasets: [{
    name: "Num of dog",
    data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
    unit: "dogs",
    type: "area",
    valueDecimals: 0
  }, {
    name: "Num of cat",
    data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
    unit: "cats",
    type: "area",
    valueDecimals: 0
  }]
}

//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
$.each(json.datasets, function(i, dataset) {

  // Add X values
  dataset.data = Highcharts.map(dataset.data, function(val, j) {
    return [json.xData[j], val];
  });

  $('<div class="chart">')
    .appendTo('#container')
    .highcharts({
      chart: {
        marginLeft: 40, // Keep all charts left aligned
        spacingTop: 20,
        spacingBottom: 20
      },
      title: {
        text: dataset.name,
        align: 'left',
        margin: 0,
        x: 30
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      xAxis: {
        categories: json.xData,
        tickmarkPlacement: 'on',
        crosshair: {
          width: 2,
          zIndex: 3
        },
        events: {
          setExtremes: syncExtremes
        },
      },
      yAxis: {
        title: {
          text: null
        },
        zIndex: 1000
      },
      plotOptions: {

        series: {
          marker: {
            enabled: false
          },
          pointPlacement: 'on'
        }
      },
      tooltip: {
        positioner: function() {
          return {
            x: this.chart.chartWidth - this.label.width, // right aligned
            y: 10 // align to title
          };
        },
        borderWidth: 0,
        backgroundColor: 'none',
        pointFormat: '{point.y}',
        headerFormat: '',
        shadow: false,
        style: {
          fontSize: '18px'
        },
        valueDecimals: dataset.valueDecimals
      },
      series: [{
        data: dataset.data,
        name: dataset.name,
        type: dataset.type,
        color: Highcharts.getOptions().colors[i],
        fillOpacity: 1,
        tooltip: {
          valueSuffix: ' ' + dataset.unit
        }
      }]
    });
});
//});

＆＃13;

.chart {
  min-width: 320px;
  max-width: 800px;
  height: 220px;
  margin: 0 auto;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

Fiddle演示