https://jreadability.net/jwriter/js/chart_numchar.js?v=0.9.8f

1////////////////////////////////////////////////////////////
2// 文字数の棒グラフを出力する関数
3// Author: Yoichiro Hasebe
4////////////////////////////////////////////////////////////
5
6function create_numchar_chart(numchar_data, language){
7  var label_current;
8  var label_target;
9  if(language === "en"){
10    label_current = "Current";
11    label_target =  "Target";
12  } else {
13    label_current = "入力文字数";
14    label_target =  "目標文字数";
15  }
16
17  // 既存のイベントハンドラーをクリーンアップ
18  $('#numchar_chart').unbind('jqplotPostDraw');
19  $(window).off('resize.numchar_chart');
20
21  $.jqplot.config.enablePlugins = true;
22
23  // 元の2バー構造に戻す
24  var plot = $.jqplot('numchar_chart',
25    [
26      [[numchar_data["elements"], label_current], [numchar_data["target"], label_target]]
27    ],
28    {
29      seriesDefaults:{
30        renderer:$.jqplot.BarRenderer,
31        pointLabels: { show: true, location: 'w', edgeTolerance: 5 },
32        rendererOptions: {
33          barDirection: "horizontal",
34          varyBarColor: true,
35          barPadding: 8,
36          barMargin: 10,
37          barWidth: null,
38          shadowOffset: 0,
39          shadowDepth: 0,
40          shadowAlpha: 0,
41          shadow: false,
42          highlightMouseOver: false,
43          borderWidth: 0,
44          borderColor: null
45        }
46      },
47      grid: {
48        background: '#ffffff',
49        gridLineColor: '#eeeeee',
50        borderColor: '#dddddd',
51        borderWidth: 1,
52        shadow: false
53      },
54      axes: {
55        yaxis: {
56          renderer: $.jqplot.CategoryAxisRenderer,
57          tickOptions: {
58            fontSize: '10pt',
59            markSize: 0
60          }
61        }
62      },
63      // バーの色を淡くして数字を見やすく
64      seriesColors: ['rgba(52, 152, 219, 0.7)', 'rgba(243, 156, 18, 0.7)'] // 青とオレンジ（70%透明度）
65    }
66  );
67
68  // 描画完了後に背景バーを追加
69  $('#numchar_chart').bind('jqplotPostDraw', function() {
70    addBackgroundBarOverlay(plot, numchar_data["target"]);
71  });
72
73  // 最初の描画後、手動で背景バーを追加（イベントが発火しない場合のフォールバック）
74  setTimeout(function() {
75    addBackgroundBarOverlay(plot, numchar_data["target"]);
76  }, 10); // 遅延を最小化
77
78  // ウィンドウリサイズ時にチャートを再描画
79  $(window).off('resize.numchar_chart').on('resize.numchar_chart', function() {
80    // デバウンス処理（リサイズ完了後に実行）
81    clearTimeout(window.numcharResizeTimer);
82    window.numcharResizeTimer = setTimeout(function() {
83      plot.replot({ resetAxes: true });
84    }, 250);
85  });
86}
87
88// jqPlotの正確な座標を使って背景バーを追加
89function addBackgroundBarOverlay(plot, targetValue) {
90  // 既存の背景バーを削除（再描画時）
91  $('#numchar_chart .background-bar-overlay').remove();
92
93  // プロットのグリッド情報を取得
94  var plotDim = plot.grid._plotDimensions || {};
95  var gridPad = {
96    top: plot.grid._top || plotDim.top || 10,
97    left: plot.grid._left || plotDim.left || 80,
98    right: plot.grid._right || plotDim.right || 40,
99    bottom: plot.grid._bottom || plotDim.bottom || 40
100  };
101  var gridWidth = plot.grid._width || plotDim.width || 500;
102  var gridHeight = plot.grid._height || plotDim.height || 200;
103
104  // X軸の情報を取得
105  var xaxis = plot.axes.xaxis;
106  var xmin = xaxis.min;
107  var xmax = xaxis.max;
108
109  // 入力文字数のバーの位置
110  // jqPlotでは下から上にカテゴリが配置されるため、入力文字数は上側（barIndex = 1）
111  var barIndex = 1; // 入力文字数は2番目（上側）のバー
112  var numBars = 2;  // バーは2つ
113  var barHeight = gridHeight / numBars * 0.6; // バーの高さ（グリッドの60%）
114
115  // バーのY位置を計算
116  var barY = gridPad.top + (gridHeight / numBars) * barIndex + (gridHeight / numBars - barHeight) / 2;
117
118  // 目標文字数に対応するX位置を計算
119  var barWidth = ((targetValue - xmin) / (xmax - xmin)) * gridWidth;
120
121  // HTML要素として背景バーを追加
122  var $backgroundBar = $('<div></div>')
123    .addClass('background-bar-overlay')
124    .css({
125      position: 'absolute',
126      left: gridPad.left + 'px',
127      top: barY + 'px',
128      width: barWidth + 'px',
129      height: barHeight + 'px',
130      backgroundColor: 'rgba(52, 152, 219, 0.15)',
131      zIndex: 1, // jqPlotのキャンバスより下に配置
132      pointerEvents: 'none' // クリックイベントを透過
133    });
134
135  // チャートコンテナに追加
136  var $container = $('#numchar_chart').css('position', 'relative');
137  $container.append($backgroundBar);
138}