2

1つのプロットに60（将来的にはさらに）の25ポイントのシリーズをHTMLページにプロットする必要があります。プロット全体がズームおよびフィルタリング可能である必要があります（つまり、ユーザーは、選択したシリーズを除くすべてのシリーズを非表示にするか、選択した1つのシリーズのみを非表示にできる必要があります）。

誰かがそのようなタスクに最適なjavascriptチャートライブラリを知っていますか？現在の実装はHighchartsで機能し、「選択した1つを除くすべてのシリーズを非表示にする」機能を停止します。

たぶん私はHighchartsに固執することができますが、クリックしたものを除くすべてのシリーズをすばやく非表示にする方法が本当に必要です。

アップデート：

さて、みんな、私は自分で許容できる解決策を見つけました。

4

4 に答える 4

2

人力車をチェックしてください。グラフにはかなりいいようです。あなたが望むことをするためにそれを得ることができるかもしれませんか？

そうでない場合は、RaphaëlJSを試してみてください 。グラフにも非常に適しています。グラフ用の拡張機能gRaphaëlもあります。

おそらくそれらの1つはあなたが求めていることをするかもしれません:)

編集

Flotもミックスに入れます。プロジェクトで使用したばかりですが、大規模なデータセットで非常にうまく機能し、非常に柔軟で拡張可能です。調べる価値がある

于 2012-12-28T05:25:33.047 に答える
2

amCharts.comを試してみ てください。シナリオを実装した JS フィドルは次のとおりです: jsfiddle.net/zeroin/gqtmN/ 凡例エントリをクリックすると、すべてのグラフが非表示になり、クリックしたグラフが表示されます。

SOが要求したソースコード：

var chart;

var chart;
var chartData = [];


function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 60);

    for (var i = 0; i < 25; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var obj = {
            date: newDate
        };

        for (var j = 0; j < 60; j++) {
            obj["val" + j] = Math.round(Math.random() * (j + 1) * 10);
        }
        chartData.push(obj);
    }
}

AmCharts.ready(function() {

    generateChartData();

    chart = new AmCharts.AmSerialChart();
    chart.marginTop = 0;
    chart.autoMarginOffset = 5;
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
    };
    chart.dataProvider = chartData;
    chart.categoryField = "date";

    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 2;
    categoryAxis.gridAlpha = 0.15;
    categoryAxis.axisColor = "#DADADA";


    for (var j = 0; j < 60; j++) {
        var graph = new AmCharts.AmGraph();
        graph.title = "series " + j;
        graph.valueField = "val" + j;
        graph.hidden = true;
        chart.addGraph(graph);
    }

    chart.graphs[0].hidden = false;

    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);

    var chartScrollbar = new AmCharts.ChartScrollbar();
    chart.addChartScrollbar(chartScrollbar);

    var legend = new AmCharts.AmLegend();
    legend.addListener("showItem", handleAll);

    chart.addLegend(legend);
    chart.write("chartdiv");
});


function handleAll(event) {
    for (var j = 0; j < 60; j++) {
        chart.graphs[j].hidden = true;
    }

    event.dataItem.hidden = false;
    chart.validateNow();
}​

免責事項: 私は amCharts の作成者です。

于 2012-12-28T08:26:33.160 に答える
1

HTML5 Charting Javascript を使用すると、シリーズを非表示にして、「visible」プロパティを false に設定できます。シリーズの onclick イベントを使用して、クリックされたシリーズ以外のすべてのシリーズを非表示にできます。次に例を示します。

Chart1.series.each(function(series) { series.onclick=clickedSeries; });

function clickedSeries(series, point) {
  Chart1.series.each(function(s) { s.visible = (s === series) });
  Chart1.draw();
}

ここに完全なオンライン デモがあります。

http://www.steema.com/files/public/teechart/html5/v2012.12.14.1.4/demos/

デビッド・ベルネダに敬意を表します www.teechart.com

于 2013-01-02T16:58:35.280 に答える
0

申し訳ありませんが、私はあなたのすべての回答に賛成票を投じましたが、私は自分の解決策に完全に満足していました.

ハイチャートでスケールの自動更新を無効にすると、必要なパフォーマンスの向上が実現しました。

new Highcharts.Charts({
    chart: {
        ignoreHiddenSeries: false,
        reflow: false
    }
});

このように、シリーズ作品の非表示/表示は許容されます。ハイチャートの他のすべての機能が私を完全に満足させているというだけです。

シリーズ自体の大量の非表示/表示はそれほど重要ではなく、パフォーマンスの向上のみに関心がありました。

于 2013-01-05T19:21:17.877 に答える