web-dev-qa-db-ja.com

Echarts3（baidu）ツールチップで丸く着色

ツールチップで丸く着色されたEcharts3（baidu）

デフォルトでは、ツールチップには次のようにグラフと同じ色のラウンドがあります。

http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush

ただし、ツールチップをカスタマイズすると、次の例のように色分けされたラウンドが削除されます。

https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en

カスタムツールチップを使用して色を元に戻す方法はありますか？.

enter image description here

これを説明する別の方法があります。このリンクに移動します pie-simple そしてあなたは色付きの丸のないチャートを見つけるでしょう。

次の行を削除します。

formatter: "{a} <br/>{b} : {c} ({d}%)"

次に<运行>を押して更新すると、ラウンドバックが表示されます。

javascriptchartsbaiduecharts
10
Yevgeniy Afanasyev

EChartsはユーザー定義のツールチップをサポートし、必要な色を含めます。

たとえば、折れ線グラフのデモ このように があり、デフォルトのツールチップを変更したい場合は、デフォルトの色を失うことなく、ツールチップの後に%などを追加します。ツールチップコードを次のように置き換えるだけです。以下のこのコード。

tooltip : {
    trigger: 'axis',
    axisPointer: {
        animation: true
    },
    formatter: function (params) {
        var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
        let rez = '<p>' + params[0].axisValue + '</p>';
        //console.log(params); //quite useful for debug
        params.forEach(item => {
            //console.log(item); //quite useful for debug
            var xx = '<p>'   + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>'
            rez += xx;
        });

        return rez;
    }        
},

このツールチップコードを使用すると、元のツールチップcolor 邮件营销: 90がcolor 邮件营销: 90%になり、自己定義の%がツールチップに追加されます。

15
Armstrongya

Echartsは、特定の色で各シリーズのパラメータでマーカーhtmlをすでに送信しています。オリジナルのツールチップを作成するには、次のように折れ線グラフに使用します。

{
 formatter : (args) => {
   let tooltip = `<p>${args[0].axisValue}</p> `;
   args.forEach(({ marker, seriesName, value }) => {
     value = value || [0, 0];
     tooltip += `<p>${marker} ${seriesName} — ${value[1]}</p>`;
   });
   return tooltip;
   };
}
8
ahmadalibaloch

これを解決する1つの方法は、ツールチップフォーマッタでカスタムHTMLを返すことです。次に例を示します。

var formatTooltipLine = function(color){
    return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:"+color+";margin-right:5px;'></span><span>line text</span>"
}

var formatter = function(){
    // custom title
    var lines = ["<b>2016</b>"];

    // custom lines
    ["red", "orange"].forEach(function(color){
        lines.Push(formatTooltipLine(color)); 
    });

    return lines.join("<br>");
}

例： https://cdn.datamatic.io/runtime/echarts/3.3.0_61/view/index.html#id=117670017722819924657/0B3wq5VFn9PllSEVsQTJvcnVBZ

3
Jaroslav Benc