Question

我是第一次探索Highcharts数据模块。我正在加载一个CSV文件，这非常适合显示图表，但我需要做一些额外的事情，而且我现在还不知道它是否可能：

某些数据点需要以不同于其他数据点的方式显示。我需要为这些点使用不同的标记，因为数据可以是＆＃34;真实的＆＃34;或＆＃34;近似＆＃34;。有没有办法在CSV中识别这些数据点，然后让数据模块分配不同的点标记？对于系列的特定点（不是整个系列），标记需要不同。

以下是云端的基本示例：https://cloud.highcharts.com/charts/ohucuv/1

但请注意，我不会使用云，并且CSV数据会随着时间的推移而发生变化，因此必须从CSV文件中获取标记状态。这样，只需要更新CSV文件，而不需要更新Highcharts / Javascript代码。 seriesMapping对象是否可以使用？。

Answer 1

要做到这一点，你需要挂钩几个highcharts选项。首先，您需要使用seriesMapping将包含估计标记的列分配给系列中的参数，如下所示：

data: {
  csv: document.getElementById('csv').innerHTML,
  firstRowAsNames: true,
  seriesMapping: [{
    // x: 0, // X values are pulled from column 0 by default
    // y: 1, // Y values are pulled from column 1 by default
    marker: 2 // Labels are pulled from column 2 and picked up in the dataLabels.format below
  }]
},

marker的名称是任意的 - 您可以选择任何您想要的名称。下一步是使用此标志。由于您已根据csv电话启用了系列，因此您可以在chart.events.load上阅读系列文章。在这里，您可以遍历系列元素和数据点以获得marker的值。获得该值后，您可以更改point.update调用中的系列标记符号。我在这里使用对象表示法，以便highcharts知道我将修改点对象而不仅仅是x / y值：

chart: {
  events: {
    load: function() {
      console.log(this.series);
      var theSeries = this.series;
      $.each(theSeries, function(i, series) {
        theData = series.data;
        $.each(theData, function(j, point) {
          console.log(point);
          if (point.marker == 1) {
            theSeries[i].data[j].update({
              marker: {
                symbol: 'triangle'
              }
            });
          }
        });
      });
    }
  }
},

这是一个实时jsFiddle来展示这一点。我已设置我的估计标记点以使用三角形标记而不是圆形。

编辑以添加多系列方法。是的，使用多列时，您可以使用多个系列执行此操作。如果你有一个像csv：

x,somedata,somedata2,marker
1,2,10,0
2,3,11,0
3,5,12,0
4,6,13,0
5,7,14,0
6,7,15,1
7,8,16,1
8,9,17,1
9,10,18,1
10,11,19,1

您仍然可以使用seriesMapping对象。请注意，它看起来像[{}]？您可以添加另一个系列，如：

data: {
  csv: document.getElementById('csv').innerHTML,
  firstRowAsNames: true,
  seriesMapping: [{
    x: 0,
    y: 1,
    marker: 3
  },{
    x: 0,
    y: 2,
    marker: 3
  }]
},

查看更新的fiddle。基本上，对于每个系列，您可以定义映射到每个元素的列。这里x对于两个系列（第0列）都是相同的，但y值来自不同的列（1和2）。虽然我们仍然使用相同的标记标志列（第3列）。

应用新标记的逻辑仍然有效，因为我们循环遍历图表中的每个系列（第一个示例只有一个系列）。

Answer 2

更改标记：

转到简单
点击数据系列
选择您的系列
转到标记符号，然后选择系列标记

你有一个高级计划吗？

Highcharts数据模块和CSV：以不同方式显示数据点

2 个答案: