如何使用 Rebol 创建交互式图表

Question

我有这段代码可以在 rebol 中创建烛台图。现在我想使用 over Feel http://www.rebol .com/how-to/feel.html#section-6 显示每个烛台的信息，但我的盒子是用绘制方言绘制的，并且它似乎不接受事件？

plot: [
    pen green line 5x404 5x440 pen gold fill-pen 0.255.0 box 3x424 7x418 line 10x396 10x422 pen gold fill-pen 0.255.0 box 8x418 12x402 line 15x397 15x436 pen gold fill-pen 255.0.0 box 13x401 17x435 line 20x429 20x447 pen gold fill-pen 255.0.0 box 18x434 22x446 line 25x441 25x464 pen gold fill-pen 255.0.0 box 23x446 27x463 line 30x445 30x493 pen gold fill-pen 255.0.0 box 28x461 32x482 line 35x470 35x504 pen gold fill-pen 255.0.0 box 33x481 37x492 line 40x466 40x498 pen gold fill-pen 0.255.0 box 38x491 42x477
]

  grid: [1100 600]
  step-grid: 5
  max-n-points: (grid/1 / step-grid) - 1
  x-axis-border: 20
  Y-margin: 10
  X0: 5
  grid-color: coal


  main: layout [
      origin 20x0
      space 1x1
      panel1: box 1100x580 black effect reduce [
      'line-pattern 4 4
      'grid 30x30 0x0 (grid-color)
      'draw plot
      ]
      panel2: box 1100x0 black
      panel3: box 1100x20 black
  ]

  view main

Answer 1

这是我之前与图表查看器相关的答案的一些扩展。

您可以采用多种方法来适应它，但它应该为您提供一些解决问题的想法。

rebol []

plot: []
data: reduce [ ]

refresh: func [/local clr delta prev-pos pos] [
    clear plot
    prev-pos: 0x300
    foreach [clr delta] data [
        pos: prev-pos + (delta * 0x1) + 7x0
        append plot compose [
            pen (clr) line (prev-pos) (pos) fill-pen (clr) pen none circle dot-size (pos) 
        ]
        prev-pos: pos
    ]
    show panel1
]
add-data: func [i][loop i [append data reduce [(random white * .85) + (white * .15) (-20 + random 40)]] refresh]

grid: [800 600]
step-grid: 5
max-n-points: (grid/1 / step-grid) - 1
x-axis-border: 20
Y-margin: 10
X0: 5
grid-color: coal
dot-size: 3

viewer-size: 800x580

; open up console before vid window
main: layout [
    origin 20x0
    space 1x1
    field 800
    panel1: box viewer-size black rate 30 effect [
        line-pattern 4 4
        grid 30x30 0x0 grid-color
        draw plot
    ] feel [
        ;probe first panel1
        over: func [face over? offset /local d][
            panel1/pane: either over? [info-pane][none]
            
            if over? [
                d:  offset/x - face/offset/x - 1
                d: (to-integer d / 7) * 2 + 1
                either d: pick data d [
                    info-box/text: to-string d
                ][
                    panel1/pane: none
                ]
            ]
        ]
        engage: func [face action event] [
            switch action [
                down [
                    drag-start: event/offset
                ]
                up [
                    drag-end: event/offset
                    scroll-size: to-integer abs ((pick (drag-start - drag-end) 1) / 5)
                ]
                time [
                    info-box/offset: event/offset - 20x20 ; the offset is the main-window origin
                    show main
                ]
            ]
        ]
    ]
    panel2: box 800x0 black
    panel3: box 800x20 black
]

insert-event-func [
    either all [
        event/type = 'key 
        none? system/view/focal-face
    ][
        print ["shortcut: " event/key]
        switch event/key [
            ; escape
            #"^[" [quit]
            ; enter/return
            #"^M" [print "resampling data" clear data add-data 100]
            up [dot-size: dot-size + 1 show panel1]
            down [dot-size: dot-size - 1 show panel1]
            left [clear skip tail plot -12 clear skip tail data -2 show panel1]
            right [add-data 2]
        ]
        none
    ][
        event
    ]
]


info-box: make face [
    offset: 0x0
    color: white * .2
    size: 150x30
    text: "0.0.0"
    font: make font [valign: 'middle style: [bold italic]]
]
info-pane: reduce [info-box]

add-data 100
refresh
view/options main [all-over]
focus panel1

请注意，当我们将鼠标移到图表上时，我们仅使用鼠标的 X 分量来确定要显示的内容。更好的系统是显而易见的，但这足以说明需要做什么来接收所有鼠标移动事件并对其采取行动。

另请注意，过度感觉会接收窗口偏移，因此您必须删除面部的偏移才能获得真实的面部相对坐标。

PS：上面的红色箭头，是我的鼠标光标。