2

我需要在 HTML 页面上的单个绘图上绘制 60 个（将来更多）25 个点系列。整个图应该是可缩放和可过滤的（用户应该能够隐藏除所选系列之外的所有系列或仅隐藏所选系列）。

有人知道最适合此类任务的 javascript 图表库吗？当前的实现适用于 Highcharts 并且它在“隐藏除一个选定的系列之外的所有系列”功能时窒息。

也许我可以坚持使用 Highcharts，但我真的需要一种方法来快速隐藏所有系列，除了点击的系列。

更新：

好的，伙计们，我自己找到了可接受的解决方案。

4

4 回答 4

2

看看人力车。图表看起来很不错。也许可以让它做你想做的事？

如果没有，也许试试Raphaël JS 对于图表也很不错，并且还有用于图表的扩展 gRaphaël。

也许其中之一可能会做你所追求的:)

编辑

我也会将Flot加入其中。我刚刚在一个项目中使用过它，它在大型数据集上运行得非常好，而且非常灵活和可扩展。值得关注

于 2012-12-28T05:25:33.047 回答
2

试试amCharts.com 这是 JS fiddle 实现了您的场景：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 允许隐藏系列将其“可见”属性设置为 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

好吧，对不起，我对你所有的答案都投了赞成票，但我对自己的解决方案完全满意。

在 Highcharts 上禁用比例的自动更新可以提高性能：

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

这样隐藏/显示系列作品是可以接受的。只是Highcharts的所有其他功能完全让我满意。

系列本身的大规模隐藏/显示并不那么重要，我只对提高性能感兴趣。

于 2013-01-05T19:21:17.877 回答