Day14 老人护眼模式

• Zoom

你是不是常常有看东西觉得模糊需要放大镜呢?今天要来介绍完整的图表的放大、缩小、以及拖曳平移的功能。
今天的主角就是chartjs-plugin-zoom，它也是chart.js的plugin之一，虽然在前天的外挂也有部分的zoom-in功能，但这个简单好用又完整，首先除了原本的chart.js我们要再挂上hammer和本身的chartjs-plugin-zoom：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>

然後再图表的配置物件(config)加上这些功能的设定，其中我们先将拖曳放大(drag)的功能关闭，平移(pan)功能开启(enabled: true)，因为这两个在控制上会有冲突，所以我们等会做个按钮切换：

        options: {
          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: 'xy',
              },
              zoom: {
                mode: 'xy',
                drag: {
                  enabled: false,
                },
              },
            }
          }
        },

另外此套件还提供滚轮(wheel)和pinch的控制方式，但这对一般用滑鼠控制比较鸡肋，这里就不特别介绍，详细可以参考官网内的option说明。其中pan和zoom(drag、wheel和pinch都算在里面)都提供方式的选择(mode)，预设是xy，也可以单独选择x或y。
另外zoom-in时可以有颜色区块差异，如下设定以及结果：

backgroundColor: RGBwithA(CHART_COLORS.orange, 0.2), 
borderColor: CHART_COLORS.yellow,
borderWidth: 2,

• Button function

四种功能(drag、pan、wheel、pinch)都有提供使用额外按键去启动(例如要按着shift)以区隔的选项，但这不太直觉，所以我们做一个按钮来开启或关闭拖曳平移(pan)，但这边有一点比较奇怪是如果一开始是先开启drag而关闭pan，再开启pan时会没反应，但开启或关闭drag都是正常的：

function panSwitch(chart, buttonId) {
  let button = document.getElementById(buttonId);
  let panState = chart.options.plugins.zoom.pan.enabled;
  if (panState) {
    chart.options.plugins.zoom.zoom.drag.enabled = true;
    chart.options.plugins.zoom.pan.enabled = false;
    button.className = "btn btn-sm btn-outline-secondary";
  } else {
    chart.options.plugins.zoom.zoom.drag.enabled = false;
    chart.options.plugins.zoom.pan.enabled = true;
    button.className = "btn btn-sm btn-outline-secondary active";
  }
  chart.update();
}

方向的模式也可以用按钮做切换：

function modeSwitch(chart, buttonId) {
  let button = document.getElementById(buttonId);
  let modeState = chart.options.plugins.zoom.zoom.mode;
  if (modeState == "xy") {
    chart.options.plugins.zoom.zoom.mode = "x";
    chart.options.plugins.zoom.pan.mode = "x";
    button.innerHTML = "X";
  } else if (modeState == "x") {
    chart.options.plugins.zoom.zoom.mode = "y";
    chart.options.plugins.zoom.pan.mode = "y";
    button.innerHTML = "Y";
  } else if (modeState == 'y') {
    chart.options.plugins.zoom.zoom.mode = "xy";
    chart.options.plugins.zoom.pan.mode = "y";
    button.innerHTML = "XY";
  }
  chart.update();
}

另外还可以是按钮的zoom-in和zoom-out，这有function可以直接接，只要填入比例系数：

<button type="button" class="btn btn-sm btn-outline-secondary" onclick="myChart.zoom(1.2)">Zoom-In</button>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="myChart.zoom(0.8)">Zoom-Out</button>

最後一个最重要，就是当我们zoom-in时要退回原本的大小，要reset zoom，这也是有function可以接：

<button type="button" class="btn btn-sm btn-outline-secondary" onclick="myChart.resetZoom()">Reset Zoom</button>

成果如下：
切成X方向的drag zoom-in:

切成Y方向的drag zoom-in: