Question

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

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

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

更新

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

Answer 1

结帐Rickshaw。对于图表来说似乎很不错。或许可以让它做你想做的事情？

如果没有，也许试试Raphaël JS对于图表也非常好，并且图表也有扩展gRaphaël。

也许其中一个可以做你想做的事情：）

修改

我也会将Flot投入混音中。我刚刚在一个项目中使用它，它对大型数据集很有效，并且非常灵活和可扩展。值得期待

Answer 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的作者。

Answer 3

teechart HTML5图表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

Answer 4

对不起，我已经提出了所有答案，但我对自己的解决方案非常满意。

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

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

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

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

什么javascript库最适合绘制线图，每个系列的点数都很少

4 个答案: