连接图中的两点

发布于 2025-01-07 23:31:15 字数 135 浏览 1 评论 0原文

我正在尝试使用 HighStock JS 进行 JSON 数据的图形表示，并且我想使用另一条直线连接图表上的两个点..例如我的是一个股票市场图表，我想连接每日“高点”或该图表内的“低点”为直线...是否可以使用 Highstock JS 图表来做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落成白 2025-01-14 23:31:15

是的，您可以使用 HighStock JS 来做到这一点。创建图形后，您可以使用 renderer.path 方法创建路径。它遵循与 SVG 路径相同的形式。这是一个简短的片段，它将创建一条从绝对坐标 (300,50) 到 (400,50) 的线。有关更多详细信息，请参阅渲染器文档 http://www.highcharts.com/ref/#renderer

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    },
    function(chart) { // on complete
        chart.renderer.path(['M', 300, 50, 'L', 400, 50])
             .attr({
                 'stroke-width': 2,
                 stroke: 'red'
             })
             .add();
        });
    });

Yes, you can do this with HighStock JS. After you create the graph, you can use the renderer.path method to create a path. It follows the same form as the SVG path. Here is a short little snippet that would create a line from the absolute coordinates (300,50) to (400,50). See the renderer documentation for more details http://www.highcharts.com/ref/#renderer

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    },
    function(chart) { // on complete
        chart.renderer.path(['M', 300, 50, 'L', 400, 50])
             .attr({
                 'stroke-width': 2,
                 stroke: 'red'
             })
             .add();
        });
    });

回复收藏 0 原文

~没有更多了~