Question

我有一个简单的线条高图，单个“空”值我知道，我可以将该行与connectNulls: true连接起来。

问题：
是否可以用单独的颜色或用虚线标记连接？

FIDDLE：
http://jsfiddle.net/SebastianH4/xpjqou95/1/

Answer 1

是的，有可能。见这里：http://jsfiddle.net/mtg6bd0o/3/

你可以使用brightmatrix的答案中描述的技巧，但这是另一个解决方案：

Highcharts为我们提供了一个非常简单易用的Renderer API，它可以让我们做一些很酷的东西，比如绘制形状，文本和路径（一般来说，svg元素）。

然后使用一些图表操作和渲染器，我们可以实现这种目标。

var chart = $('#container').highcharts();
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;

for (var i = 0; i < data.length; i++) {
    var path = [];
    if (data[i] == null) {
        var p1 = chart.series[0].points[i - 1],
            p2 = chart.series[0].points[i + 1];

        p2 = p2 == undefined ? p1 : p2;
        path.push('M');
        path.push(p1.plotX + plotLeft, p1.plotY + plotTop);
        path.push('L');
        path.push(p2.plotX + plotLeft, p2.plotY + plotTop);
    }

    var line = chart.renderer.path(path)
        .attr({
            'stroke-width': 2,
            stroke: Highcharts.getOptions().colors[0],
            dashstyle: 'ShortDash'
        })
        .add();
}

我会解释：

首先，我们使用2个变量plotleft和plotTop，它们相对于顶部和左侧坐标保存图表实际位置的值。

然后我迭代数据，这样在每次迭代中我创建一个path数组，它具有初始点（线开始，在'M'之后）和终点坐标（在'之后' L'）。这是使用SVG创建路径的标准方法。实际发生的是，对于每个零点，我采用前一个和下一个点的坐标并将它们推送到path。

这里我迭代一些虚拟数据，显然可以从系列本身中重新获得。

然后，在我有了所需的坐标后，我可以使用Renderer API绘制线条本身（参考：http://api.highcharts.com/highcharts#Renderer）

工作小提琴：http://jsfiddle.net/mtg6bd0o/3/

Answer 2

我在Stack Overflow上发现了另一个问题，它讨论了类似的情况，即用户希望为同一行（Highcharts: change line options mid-way through a line）的不同段着色，以及允许多色系列的Highcharts模块（{{3 }}）。

然而，问题的关键在于这些点需要有价值;他们不能为空。我尝试为您的空点添加颜色，但启用connectNulls忽略该设置并使用系列默认值覆盖它。

如果这是一个不会随机输入或更新数据的独立图表，您可以绘制第一个位于第一个系列后面的系列，并且只有第一个具有空值的点。这是我编写的一个例子：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'LineWithNulls'
        },
        subtitle: {
            text: 'How can I connect the the line in a different color or with a dotted line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [4, 5, 1, { y: null, color: 'red'}, 3, 4, 2, null, 5, 6],
            connectNulls: false, zIndex: 2
        }, {
        /* differently formatted series for "null" values in first series
           prevent from showing up in legend and prevent series from showing in tooltip on mouse over */
            data: [null, null, 1, 2, 3, null, 2, 3.5, 5, null],
            connectNulls: false, color: 'red', marker: {enabled: false}, dashStyle: 'dash', zIndex: 1, showInLegend: false, enableMouseTracking: false
        }]
    });
});`

您还可以在此处看到小提琴：http://blacklabel.github.io/multicolor_series/

请告诉我这是否有用！

Highcharts用虚线连接Null

2 个答案: