Данные Highcharts из электронной таблицы Google показывают направленную линию

Если вы видите эту линейную диаграмму

Пример Highcharts

Вы можете видеть, что данные по Лондону имеют направленную линию (со стрелками).

Я хочу добавить его сюда Моя игровая площадка Этот фрагмент кода преобразует ряды в линейные диаграммы.

function (chart) {
    chart.series[2].update({
        type: 'line',
        color: 'blue'
    });
}

Я попытался проверить параметры и ссылки на API. Но не смог найти хорошего решения. Итак, любая помощь?


javascript jquery highcharts linechart
person user3241013    schedule 27.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В рассматриваемом вами примере лондонская линия не направлена ​​(хотя выглядит как стрелка). На линии есть точки с маркерами, как и на других линиях, только маркер Лондона представляет собой треугольник ... он просто выглядит как стрелка из-за того, как он наклонен в последней точке.

Дополнительную информацию о маркерах можно найти в Справочнике по API Highcharts.

Я не видел направленной линии на графике HighCharts :(

person Eric Watson    schedule 27.01.2014
comment
Это плохо. Должен быть один. - person user3241013; 28.01.2014

arrow_upward
0
arrow_downward

Как сказал @Eric Watson, направленная линия не поддерживается, но ее можно достичь. Здесь вы можете найти пример того, как добавить стрелку к сплайну: http://jsfiddle.net/aUMCS/2/

    var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY));
    path.push(
        'M',
        lastPoint.plotX, lastPoint.plotY,
        'L',
        lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle),
        lastPoint.plotX + arrowLength * Math.sin(angle), lastPoint.plotY + arrowLength * Math.cos(angle),
        lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle),
        'Z'
    );

Я думаю, вы можете либо обновить это решение, чтобы добавить стрелку к каждому маркеру, либо просто разделить ряд на два элемента каждый, а затем соединить все ряды, используя опцию linkedTo.

person Paweł Fus    schedule 28.01.2014