获取 jqplot 折线图刻度上的线性分布答案

【问题标题】：Get linear distribution on jqplot line chart ticks获取 jqplot 折线图刻度上的线性分布
【发布时间】：2013-07-05 03:25:33
【问题描述】：

我想在 jqPlot 图表渲染器上提供 tickInterval 以获得 xaxis 上的线性分布。

 $.jqplot.config.enablePlugins = true;
    var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];

    function PlotChart(chartData) {


    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.CanvasAxisLabelRenderer,
            rendererOptions: {
                smooth: true
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                label: 'Number of Cookies',
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%d'
                }
            },
            yaxis: {
                label: 'Calories',
                tickOptions: {
                    formatString: '%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
   });
} PlotChart(chartData);

jsfiddle example

以上是图表当前外观的示例。
我想在xaxis（tickInterval - 5）上提供点 1、5、10、15、20，并且与 1、3、5、15 相关的图需要在坐标平面中以映射值 [[ 1, 224], [3, 672], [5, 1120],[15,2240]]

目前它根据xticks 分布，这是不均匀的。欢迎任何帮助！

我尝试使用 min/max 和 tickInterval 属性来获取它，但它似乎不太好。

【问题讨论】：

标签： javascript jquery charts jqplot linechart

【解决方案1】：

如果您想在 x 轴上提供 tickIntervals，那么您可以这样做。

$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];

function PlotChart(chartData) {

var plot2 = $.jqplot('chart1', [chartData], {
    title: 'Mouse Cursor Tracking',
    seriesDefaults: {
        renderer: $.jqplot.CanvasAxisLabelRenderer,
        rendererOptions: {
            smooth: true
        },
        pointLabels: {
            show: true
        }
    },
    axes: {
        xaxis: {
            label: 'Number of Cookies',
            min:0,
            max:20,
            tickInterval:5,
            // renderer to use to draw the axis,     
            tickOptions: {
                formatString: '%d'
            }
        },
        yaxis: {
            label: 'Calories',
            tickOptions: {
                formatString: '%.2f'
            }
        }
    },
    highlighter: {
        sizeAdjust: 7.5
    },
    cursor: {
        show: true
    }
});
}
PlotChart(chartData);

jsFiddle link

您可以在绘制图形之前计算min、max 和tickInterval。我希望这会有所帮助。

【讨论】：

您的代码运行良好。但看起来您提供的 jsFiddle 链接来自我的示例，因此它不反映更改。这是更新的 - jsfiddle.net/jpatel/EWJLb

【解决方案2】：

NOT 使用 renderer: $.jqplot.CategoryAxisRenderer 你会按自己的方式进行的

【讨论】：