2012-07-18

Highchartsの積み棒グラフで合計値の表示

基本的な使い方はある程度理解している前提で書き始めます

やりたいこと

f:id:nacy:20120718114536p:plain
こんなグラフを表示させたいと思います。

要は積み棒の表示数値を、加算していく（？）形で表示させたかったのです。

方法

下記の様に、各データ毎にdataLabelsのformatterで値を入れてやれば
(かなり無理やりですが)表示させることができます。

var chart;
$(function() {
  // create the chart
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'status_bar',
      type: 'bar'
    },
    
    title: { text: '' },
    xAxis: { categories: ['A', 'B'] },
    yAxis: { min: 0, title: '' },
    legend: { reversed: true },
    plotOptions: {
      series: {
        stacking: 'normal',
        // ここのdataLabelsで以下のdataLabelsの共通設定
        dataLabels: {
          enabled: true,
          align: 'right',
          color: '#fff',
          x: -10
        }
      }
    },

    series: [
      {
        name: '最大',
        data: [
          {
            dataLabels: { formatter: function(){ return 954; } },
            y: 666
          },
          
          {
            dataLabels: { formatter: function(){ return 636; } },
            y: 444
          }
        ]
      },
      {
        name: '初期',
        data: [
          {
            dataLabels: { formatter: function(){ return 288; } },
            y: 288
          },
          
          {
            dataLabels: { formatter: function(){ return 192; } },
            y: 192
          }
        ]
      },
    ]
  });
});

もっといい方法があったら誰か教えて下さい...

2012-07-04

jquery.ui.sortableでhelper:cloneした元のDOMを表示させたい

掲題のことがしたかったけど、ちょっと詰まったのでメモ。

sortableのoptionのhelper:"clone"をすることで
「要素を複製して表示するghostingエフェクトが適用される」
というので、元の要素は表示されたままかと思ったら、defaultで非表示。

$(function(){
  $("#sortable").sortable({
    helper: "clone"
  )};
});

これだけだと、ドラッグしたときに元の位置にある要素はdisplay:noneの状態にされてしまう。
で、これをどうすれば表示させられるのかわからなかったんだけど
以下で普通にできた。

$(function(){
  $("#sortable").sortable({
    helper: "clone",
    start: function(event, ui){ ui.item.css("display", "block"); };
  )};
});

http://stacktrace.jp/jquery/ui/interaction/sortable.html
こちらを参考に調べてたんだけど、
イベントハンドラの第2引き数がもつプロパティの説明

item 現在ドラッグ中の要素です。

というのに惑わされた。
helper:cloneをしている場合、今まさにドラッグしているそれは実はheplerプロパティで
itemプロパティが非表示状態になっているコピー元のDOMでした、っていうオチ。

2012-06-26

アメーバブログへの投稿プログラム

Ruby アメブロ x-wsse

アメブロに記事投稿とか編集・削除・取得する為のAPI?を作ってみました。
nacy0708/amebablog · GitHub
動作させるのにNokogiriが必要になります。

残念ながら画像のアップロード等、画像関連には対応していません...
ざっくりと使い方を書くと

require 'nokogiri'
require 'amebablog'

@client = Amebablog::Client.new("login_id", "password")
@list  = @client.get_feed              # <= 記事一覧の取得
@entry = @client.get_entry("entry_id") # <= 指定記事の取得

@client.post_feed(
           "記事タイトル",
           "記事のコンテンツ（HTML可）"
        )                              # <= 記事の投稿
@client.edit_entry(
           "entry_id",
           "記事タイトル",
           "記事のコンテンツ（HTML可）"
        )                              # <= 記事の編集

@client.delete_entry("entry_id")       # <= 記事の削除